Div take up full space
Question
I want my header and footer to be always show up at the top and bottom respectively irrespective of the screen resolution ie only the main body should contain scrollbars.
This is my jsfiddle:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="height:60px;background:#000;color:#fff;">This is header</div>
<div style="height:100%;background:red;" id="red">...
</div>
<div style="height:60px;background:#000;position:fixed;bottom:0px;width:100%;color:#fff;">This is footer</div>
</body>
</html>
I only want red section to take up the scrollbar (irrespective of the screen resolution). Hence it should work in Ipad or IPhone too. I tried to give 100% to the red section but the other end of the scrollbar is not visible. Hence the footer and body seems to be overlapping. Could anybody please help me?
3 answers
solution1
4 ACCPTED 2013-01-25 11:54:07
html,body
{
height:100%;
width:100%;
overflow:hidden;
}
body
{
padding: 60px 0px;
height: 100%;
box-sizing: border-box;
}
.header
{
height:60px;
background:#000;
color:#fff;
width: 100%;
position: fixed;
top:0;
}
.body
{
overflow-y: scroll;
height: 100%;
}
.footer
{
height:60px;
background:#000;
position:fixed;
bottom:0px;
width:100%;
color:#fff;
bottom:0
}
solution2
0 2013-01-25 11:47:48
Key is the position attribut. Try this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="height:60px;background:#000;color:#fff; position: absolute; top: 0px;">This is header</div>
<div style="height:100%;background:red;" id="red">...
</div>
<div style="height:60px;background:#000;position:absolute;bottom:0px;width:100%;color:#fff;">This is footer</div>
</body>
</html>
solution3
0 2013-01-25 11:59:03
I would say the issue is the way you are trying to achieve something that can easily be done if you are happy for your content to overlap your footer.
Using position:fixed; on your Header and Footer then you achieve your desire of fixed headers and footers. You then just need the content to scroll as it would normally.
To offset the header and the footer, and so we can see the content beneath it, we just add a margin to the top and the bottom of the body. In this case it is:
body { margin: 60px 0; }
This would also work on mobile devices.
I would always advise that developers make use of what the browser already does, rather than trying to mimic the default behaviour with scripts/tricks.
That way of developing will add hours to your development time and can not always work cross browser. Do it this ay also causes issue with the longevity of your site in the case that a browser stops supporting certain features/ways of scripting.
I have updated your fiddle to show you what I mean: http://jsfiddle.net/rnF9p/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.