Menu
I have seen it before and have done it so I know it works pretty consistently, however, I want to know if that is valid and if there are caveats that I have not thought of.
example: http://jsfiddle.net/sfctB/67/ I offered this fix for someone with a FF overflow problem recently, which was caused by a box-sizing property. Adding the simple -moz- prefix fixed it as well but I opted for something that seemed more valid to me. I set the top and bottom on a content div so that it always stretches between a fixed header and fixed footer. Then set margins to avoid the overflow.
I would intuitively think that using top and bottom or right and left at the same time would cause problems, however, what it seems to do is make right act kind of like width when there is a left already stated and make bottom act kind of like height when there is already a top stated.
But is this valid and should I use it when considering long term support?
code
html, body {
height:100%;
width:100%;
overflow:hidden;
}
body {
padding: 60px 0px;
height: 100%;
}
.header {
height:60px;
background:#000;
color:#fff;
width: 100%;
position: fixed;
top:0;
}
.body {
overflow-y: scroll;
position:fixed;
bottom:0;
top:60px;
margin: 0 0 60px 0;
}
.footer {
height:60px;
background:#000;
position:fixed;
bottom:0px;
width:100%;
color:#fff;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="header">This is header</div>
<div class="body">[content here]</div>
<div
class="footer">This is footer</div>
</body>
</html>
822
Good question. I've wondered about this for a long time, so I went to the spec ( http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width and http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height). It looks like it's a fully spelled out and the answer is what you'd expect it to be. For an absolutely positioned element if width is "auto" and left and right are defined then:
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
Similarly for height:
5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
I think tPlummer makes a good point, however. The spec and reality may be two different things; especially when it comes to older browsers.
81
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
