CSS：将 div 高度设置为 100% - 像素答案

【问题标题】：CSS: Set Div height to 100% - PixelsCSS：将 div 高度设置为 100% - 像素
【发布时间】：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），每行缩进四个空格。
“回答你自己的问题”，这样下一个人就可以看到你做了什么。

标签： css html height

【解决方案1】：

div{
  height:100vh;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

此解决方案不适用于所有浏览器

【解决方案2】：

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。

此外，您可能希望将其放入窗口调整大小事件中，以便在例如窗口高度增加时重新运行脚本。

【讨论】：

【解决方案3】：

div{
  height:100vh;
  background-color:gray;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

最好的方法是使用视口样式。它只是完成工作，不需要其他技术。

代码：

div{
  height:100vh;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

像往常一样，在 IE 中使用时需要注意。 caniuse.com/#feat=viewport-units

【解决方案5】：

现在有了 css3，你可以尝试使用 calc()

.main{
  height: calc(100% - 111px);
}

看看这个答案： Div width 100% minus fixed amount of pixels

【讨论】：

【解决方案6】：

我在 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;
}

【讨论】：

【解决方案7】：

或者，您可以只使用position:absolute：

#content
{
    position:absolute;
    top: 111px;
    bottom: 0px;
}

但是，IE6 不喜欢顶部和底部声明。但是网络开发者不喜欢 IE6。

【讨论】：

这正是我所拥有的，正如你所提到的，IE6 不喜欢同时使用两者。我同意你的观点，但这就是客户想要的。必须编写 javascript 才能正确处理
top 和 bottom 多个位置声明在任何浏览器上都不起作用
非常抱歉！你说得对。我在没有position: absolute 的情况下进行了快速测试。我的选票已锁定，该死的。有人支持这个人并纠正我的邪恶方式:)
哈哈哈哈哈哈哈哈哈。最佳评论：“IE6 不喜欢顶部和底部声明。但 Web 开发人员不喜欢 IE6。”男人哦男人。谢谢你让我开心。

【解决方案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】：

我猜你正在尝试获取sticky footer

【讨论】：

嗯，不完全是这样，但有点像这样。我有一个标题，所以我相应地调整了 css，但 div 太大了，仍然设置为 100%