CSS height percentage specification
开发者_如何学JAVAI'm trying to set out a screen-fitting application to my website, but I am having some problems, I know the ins and outs of CSS on the basics side, but I get a little confused when using percentages.
I need a header (50px), then I need a box (height 100%) then a small box footer(20px), but this all needs to be on the screen without overflow, when I try this with the given code I get an overflow because of the 100% item which pushes the footer down causing an overflow scrollbar.
<div id="holder"> <-- this is set to 100% width & height as well as html, body
<div id="header">
</div>
<div id="inner_holder"> <-- This is the holder which is 100%
</div>
<div id="footer">
<div/>
</div>
You can use CSS position property to position the footer at the bottom. So, the remaining space is automatically available for your inner_holder div element.
<html>
<head>
<title>SO</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
div#holder {
height: 100%;
background: lightblue;
}
div#header {
height: 50px;
background: #800000;
}
div#inner_holder {
background: lightblue;
}
div#footer {
height: 20px;
width: 100%;
background: #800000;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="holder">
<div id="header">
Header
</div>
<div id="inner_holder">
Inner holder
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
My advise is not to attempt making the inner_holder any fixed height at all. Position the header as normal with fixed height. Absolutely position the footer using left and bottom positions of 0 with a fixed height. Let the content flow normally with no modification. If scrollbars are needed the browser will accommodate. If you require background colors or images simply apply them to the body.
加载中,请稍侯......
精彩评论