All geek questions in one place

DIV - 100% height causing scroll bars

I have a bit of a problem with a div causing scrollbars when the height is set to 100%.

Currently, the contents of my page are as follows:

<body> <hr> <div id="content"> <div id="heading"> </div> </div> </body>

The problem is that HR is 5 pixels and the content is 100% of body height. Thus, since it is 100% of the page height, it goes below HR and creates 5px, so that a scrollbar is created that I want to avoid.

My question is: how can I make it 100% tall if he doesn't think that it should be a 100% pageview and not include HR in the page height?

Thanks.

+4
source share
5 answers

This type of layout is best done using absolute positioning. Here is an example using your HTML: http://jsfiddle.net/7KGmZ/

CSS

 #content { position: absolute; top: 20px; right: 0px; bottom: 0px; left: 0px; }​
+2
source

You may try:

 position: absolute; top: 0px; bottom: 0px;

This, however, will overlap with HR. If you set the top position to 5px , it will not.

+2
source
  • You can remove hr and put the frame on the heading div .
  • You can remove hr and put the border in the content div and change the box-sizing property to border-box .
  • You can move hr inside the content div .
+1
source

You can set position: absolute , and then place it using top: 5px and bottom: 0; .

+1
source

For me, the problem was that some of the elements at the top of the page had a top edge, top pad or top border, my body had a top border of 10px, after it made 0px, the slider disappeared.

0
source

Source: https://habr.com/ru/post/1400621/

More articles:


All Articles