CSS：将 div 高度设置为 100% - 像素
Posted
技术标签:
【中文标题】CSS：将 div 高度设置为 100% - 像素【英文标题】：CSS: Set Div height to 100% - Pixels 【发布时间】：2010-11-24 21:23:23 【问题描述】：我的页面上有一个超过 100 像素的标题（准确地说是 111 像素） 它下面的 div 需要延伸到视口的底部，就好像我已经将底部设置为 0px。问题在于我无法在 ie6 中指定顶部和底部（错误）。
我可以指定顶部：111px 或底部：0px，但我仍然需要正确的高度，即。 100% -111px，视视口大小而定。
似乎无法让表达式工作，因为这似乎是解决方案
这是我的 CSS 代码：
position: absolute;
width: 200px;
top: 111px;
bottom: 0px;
有什么建议吗？
【问题讨论】：
我没有看到你想要达到的目标，你能粘贴代码吗？:) 位置：绝对；宽度：200px；顶部：111 像素；底部：0px；这适用于 ie8，这就是我想要的。但是 ie6 只需要您的第一个对齐方式（在这种情况下为顶部）。因此浏览器不会自动设置所需的高度。我的解决方案是设置 top: 111px 或 bottom:opx 然后分配所需的高度。如果有任何区别，这只需要对 Internet Explorer 6 以上（不是 firefox、opera 等）有效。 抱歉，不知道如何正确显示代码 内联代码，输入`。对于块代码（不是 cmets），每行缩进四个空格。
“回答你自己的问题”，这样下一个人就可以看到你做了什么。
【参考方案1】：
最好的方法是使用视口样式。它只是完成工作，不需要其他技术。
代码：
div
height:100vh;
<div></div>【讨论】：
像往常一样，在 IE 中使用时需要注意。 caniuse.com/#feat=viewport-units【参考方案2】：我在 body 和 html 标签中添加了 height 属性。
HTML：
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
CSS：
html, body
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
#wrapper
height: 100%;
min-height: 100%;
#header
height: 111px;
【讨论】：
【参考方案3】：或者，您可以只使用position:absolute：
#content
position:absolute;
top: 111px;
bottom: 0px;
但是，IE6 不喜欢顶部和底部声明。但是网络开发者不喜欢 IE6。
【讨论】：
这正是我所拥有的，正如你所提到的，IE6 不喜欢同时使用两者。我同意你的观点，但这就是客户想要的。必须编写 javascript 才能正确处理top 和 bottom 多个位置声明在任何浏览器上都不起作用
非常抱歉！你说得对。我在没有position: absolute 的情况下进行了快速测试。我的选票已锁定，该死的。有人支持这个人并纠正我的邪恶方式:)
哈哈哈哈哈哈哈哈哈。最佳评论：“IE6 不喜欢顶部和底部声明。但 Web 开发人员不喜欢 IE6。”男人哦男人。谢谢你让我开心。【参考方案4】：
现在有了 css3，你可以尝试使用 calc()
.main
height: calc(100% - 111px);
看看这个答案： Div width 100% minus fixed amount of pixels
【讨论】：
【参考方案5】：div
height:100vh;
background-color:gray;
<div></div>【讨论】：
【参考方案6】：div
height:100vh;
<div></div>【讨论】：
此方案不适用于所有浏览器【参考方案7】：我猜你正在尝试获取sticky footer
【讨论】：
嗯，不完全是这样，但有点像这样。我有一个标题，所以我相应地调整了 css，但 div 太大了，仍然设置为 100%【参考方案8】：当然是负边距！
HTML
<div id="header">
<h1>Header Text</h1>
</div>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus
vel quam et quam congue sodales.
</div>
</div>
CSS
#header
height: 111px;
margin-top: 0px;
#wrapper
margin-bottom: 0px;
margin-top: -111px;
height: 100%;
position:relative;
z-index:-1;
#content
margin-top: 111px;
padding: 0.5em;
【讨论】：
【参考方案9】：100vh 对我有用，但起初我使用 javascript（实际上是 jQuery，但你可以调整它）来解决类似的问题。
HTML
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
js/jQuery
var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");
或者，如果你不想计算 headerHeight，你可以只使用 111px。
此外，您可能希望将其放入窗口调整大小事件中，以在例如窗口高度增加时重新运行脚本。
【讨论】：
以上是关于CSS：将 div 高度设置为 100% - 像素的主要内容，如果未能解决你的问题，请参考以下文章