Question

我的页面上有一个标题，只有100px（确切地说是111px）它下方的div需要延伸到视口的底部，就像我将底部设置为0px一样。问题在于我无法在ie6（bug）中指定顶部和底部。

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

似乎无法让表达式工作，因为它似乎是解决方案

这是我的css代码：

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

有什么建议吗？

Answer 1

我将身高属性添加到正文和 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;
}

Answer 2

执行此操作的最佳方法是使用视口模式。它只是工作而不需要其他技术。

代码：

＆＃13;

div{
  height:100vh;
}

＆＃13;

<div></div>

＆＃13;

Answer 3

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

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

然而，IE6不喜欢顶部和底部声明。但是Web开发人员不喜欢IE6。

Answer 4

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

<div></div>

Answer 5

现在使用css3，您可以尝试使用calc（）

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

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

Answer 6

我猜你正试图获得sticky footer

Answer 7

当然是负边缘！

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

Answer 8

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％ - 像素

8 个答案:

HTML

CSS