Question

Alrighty，

我将尝试解释我的情况。如果您需要更多信息，请与我们联系。

基本上，我有一个div容器，我将它设置为height:100%;它将完成100％但是当前浏览器/窗口大小只有100％。

例如：如果我最大化浏览器，容器将执行100％，但如果我向下滚动，则该容器的高度仅与浏览器高度相同。

另一个例子：如果我将浏览器最小化到一定大小并刷新页面，容器将再次100％到窗口大小。因此，如果我最大化浏览器，如果浏览器最小化，高度容器仍将是相同的高度。

因此，如果我有一个长页面，容器不会一直向下到页面，容器只会在页面加载时达到窗口的高度大小。

我正试图让容器100％一直走到页面底部，即使我有一个页脚或标题，容器应该在两者之间100％。

所以我会尝试发布最相关的代码：

body,html
{
   display:block;
   position:relative;
}
#container_100percent
{
   overflow-x:hidden;
   position:relative;
   overflow-y:auto;
   width:20%;
   min-height:100%;
   height:100%;
   float:right;
}


<div>
  <div id="container_100percent">
     <!-- some stuff !-->
  </div>
</div>

Answer 1

100％的高度是他父母的身高。

这意味着：如果父div容器没有高度，则高度也将设置为100％，并且对于正文也是如此。这就是你的div有窗户高度的原因。

所以你需要给你的div包装器一个高度，内部div将占据这个高度。

Answer 2

如果您希望容器与其内容一样高，请不要设置height属性。就这么简单。

但是，如果您希望它具有最小高度（即您永远不想让它低于窗口），请设置min-height属性。

什么是CSS 100％高度div最常见的错误是什么？

2 个答案: