CODEWITHSUNDEEP
csshtml
Konzine
Konzine

Reputation: 181

DIV - 100% height causing scroll bars

I am having a bit of issue with a div causing scroll bars when height set to 100%.

Right now, my page content looks like;

<body>  

<hr>

<div id="content">

    <div id="heading">

    </div>

</div>


</body>

The problem is that the HR is 5px, and the Content is 100% of body height. So, since it is 100% of page height, it is going below the HR and creating 5px so that a scrollbar is being made which I want to avoid..

My question is, how do I make it height 100% without it thinking that it needs to be 100%pageheight and not including the HR in the page height?

Thanks.

Upvotes: 5

Views: 3279

Answers (5)

Ivana
Ivana

Reputation: 1

For me the problem was in some of the elements on the top of the page having top margin, top padding or top border, my body had top border 10px, after making it 0px the slidebar disappeared.

Upvotes: 0

magicalex
magicalex

Reputation: 937

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

Upvotes: 1

Hubro
Hubro

Reputation: 59333

This kind of layout is best accomplished using absolute positioning. Here's an example, using your HTML: http://jsfiddle.net/7KGmZ/

css:

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

Upvotes: 3

t0nyh0
t0nyh0

Reputation: 680

You can try:

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

This will however overlap over the HR. If you set the top position to 5px, it won't.

Upvotes: 2

Joel
Joel

Reputation: 19358

  • You could remove the hr and put a border on the heading div.
  • You could remove the hr and put a border on the content div and change the box-sizing property to border-box.
  • You could move the hr inside the content div.

Upvotes: 1

Related Questions