22

我的页面上有一个标题，它刚刚超过 100 像素（准确地说是 111 像素）它下面的 div 需要扩展到视口的底部，就好像我将底部设置为 0 像素一样。问题在于我无法在 ie6 中指定顶部和底部（错误）。

我可以指定顶部：111px 或底部：0px，但我仍然需要正确的高度，即。100% -111px，根据视口的大小而定。

似乎无法使表达式起作用，因为这似乎是解决方案

这是我的CSS代码：

position: absolute; 
width: 200px; 
top: 111px; 
bottom: 0px;

有什么建议么？

4

9 回答 9

26

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

代码：

div{
  height:100vh;
}
<div></div>

于 2015-02-14T18:38:42.470 回答
22

我将height属性添加到body和html标签。

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;
}
于 2009-09-04T15:25:12.640 回答
6

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

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

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

于 2009-09-04T15:05:09.163 回答
6 

div{
  height:100vh;
}
<div></div>

于 2016-08-13T13:58:09.403 回答
5

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

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

看看这个答案： Div 宽度 100% 减去固定数量的像素

于 2013-09-27T00:09:12.480 回答
5 

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

于 2015-10-25T16:28:52.153 回答
1

我猜你正试图获得粘性页脚

于 2009-09-02T09:03:55.477 回答
0

当然是负利润！

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;
}
于 2009-09-02T10:00:06.923 回答
0

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。

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

于 2015-12-29T07:02:03.537 回答