Question

限制此类内容的最佳方法是什么？

身高：100％，但我需要100％ - 50px !!! ，我该如何计算或解决这个问题？

提前致谢！

马科，

Answer 1

如果您需要底部的50px，只需将容器向上拖50px，使用负边距并将其高度设置为100％。这样的事情应该有效：

<!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>

Answer 2

尝试＆＃34;计算＆＃34; css中的方法：

height: calc(100% - 50px);

现在（2014年4月14日）在所有主流浏览器上都支持（只有opera mini它没有） http://caniuse.com/calc

Answer 3

理论上，mandel99的答案是最好的，calc函数正是解决方案。但是，如果您需要支持不支持它的浏览器，您可以尝试以下解决方法：

1）纯CSS2.1方式 - 绝对定位：

.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和透明边框：

.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;
}

由于所有'黑客'都有其局限性，但有些情况下他们有所帮助。

Answer 4

好的，这就是事情。从Pixel转换为百分比或相反，没有1：1的比例。需要考虑很多变量。每个案例都不同。

那么，可以做的是：

height: 98.5%; /* (you can use your own numbers, obviously) */

在CSS中使用Percentages时，这将为您提供更多自由。我确信可能有另一种方式，但如果有，我不知道，这是我现在能为你做的最好的。

希望这有帮助。

Answer 5

你需要javascript。假设您已将<div id="mydiv"></div>设置为100％;

要减去50px，你可以使用jQuery并执行

var d = $('#mydiv').height(); //get the div height
var final = parseInt(d-50); //subtract 50

然后你可以通过

将-50px的新高度应用到你的mydiv

$('#mydiv').height(final); //assign the new height

Answer 6

如果你愿意使用桌子，你可以轻松地做到这一点; HTML是丑陋但它会工作。将表格高度设置为100％，两行，将内容放在第一行的单元格中，并将底行中单元格的高度设置为50px。然后，如果您需要底部50px中的某些内容，请将其放在底部行中，或者在其顶部放置div，位置绝对，底部：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>

Answer 7

这会对你有帮助吗？

min-height:100%;height:auto !important;height:50px;

或

min-height:50px;height:auto !important;height:100%;

不确定它是第一路还是第二路！困了我要去试试吧！所以你自己试试吧：D

希望它有所帮助！

限制身高的最佳方式：100％...... - 50px？

7 个答案: