Best way to limit height:100% ... - 50px?
What is should be the best way to limit something like this?
height : 100% , but I need 100% - 50px !!! , how do I calculate开发者_C百科 that or address that problem?
Thanks in advance!
Marco,
IF you need the 50px on the bottom just drag a container up 50px with a negative margin and give it 100% height. Something like this should work:
<!DOCTYPE html>
<html>
<head>
<title>100% minus 50px</title>
<style type="text/css">
html, body {
height: 100%;
}
body {
background: #000;
margin: 0;
}
#almost100 {
padding-top: 50px;
height: 100%;
}
#container {
background: #f08;
min-height: 100%;
margin-top: -50px;
}
p {
margin: 0;
}
#footer {
background: #f00;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="almost100">
<p>:)</p>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
In theory, mandel99's answer is the best, calc function is exactly the solution. But if you need to support browsers that don't support it, you can try following workarounds:
1) pure CSS2.1 way — absolute positioning:
.container {
height: 100%; /* all parents also need to have 100% height, including html */
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 50%;
width: 100%;
}
2) box-sizing: border-box and transparent border:
.element {
-moz-box-sizing: border-box; /* can be removed when Firefox 28- becomes outdated */
box-sizing: border-box;
height: 100%;
border-bottom: 50px solid transparent;
}
As all 'hacks', both have their limitations, but there are situations when they help.
try "calc" method in css:
height: calc(100% - 50px);
Now ( 14.04.2014 ) Is supported on all major browsers (only opera mini it does not) http://caniuse.com/calc
Okay, so here's the thing. There is no 1:1 ratio for converting from Pixel to Percentages or the other way around. There are a lot of variables to consider. And each case is different.
So, what you can do is this:
height: 98.5%; /* (you can use your own numbers, obviously) */
That will give you much more freedom to work with when using Percentages in CSS. I'm sure there may be another way, but if there is, I don't know about it and this is the best I can do for you right now.
Hope this helps.
You can do this easily if you're willing to use a table; the html is ugly but it'll work. Set the table height to 100%, two rows, put your content in a cell in the first row, and set the height of the cell in the bottom row to 50px. Then, if you need something in the bottom 50px, either put it in that bottom row, or position a div on top of it, position absolute, bottom:0px.
<table cellpadding=”0” cellspacing=”0” style=”height:100%”>
<tr><td>Put your stuff here</td></tr>
<tr><td style=”height:50px;”>Bottom content goes here</td></tr>
</table>
You need javascript for this.
Let's say you already have <div id="mydiv"></div> set to 100%;
To subtract 50px you can use jQuery and do
var d = $('#mydiv').height(); //get the div height
var final = parseInt(d-50); //subtract 50
Then you can apply the new height with -50px back to your mydiv by doing
$('#mydiv').height(final); //assign the new height
Will this help you?
min-height:100%;height:auto !important;height:50px;
or
min-height:50px;height:auto !important;height:100%;
not shure if it goes on first or seccond way! to sleepy i am to go try it! so you go try it yourself :D
Hope it helps!
加载中,请稍侯......
精彩评论