Menu
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.
541
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
Why does 100vh Issue Happen on Mobile Devices? I investigated this issue a bit and found out the reason. The short answer is that the browser's toolbar height is not taken into account. If you want to go deep on why this happens, I found this Stack Overflow thread very helpful.
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;
}
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.
38
hr and put a border on the heading div. hr and put a border on the content div and change the box-sizing property to border-box.hr inside the content div.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
