Best way to limit height:100% ... - 50px?_问答_开发者

Best way to limit height:100% ... - 50px?

开发者 https://www.devze.com 2023-02-12 17:24 出处：网络

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?

相关专题：css

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;

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!

Best way to limit height:100% ... - 50px?

精彩评论

关注公众号

热门标签

图文推荐

Best way to limit height:100% ... - 50px?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：