Question

我已经有4个嵌套div的命名：wrap＆gt; container＆gt; parentBox＆gt; childBox。

容器div是100％减去70px（70px是页脚的高度（60）加上10px = 70px）。

我希望parentBox占据容器div剩余的高度（100％）。我希望childBox占用100％的parentBox div，减去header（也在parentBox里面，包含单词＆＃39; test＆＃39;），这是40px的高度; < / p>

但我得到的结果是parentBox和childBox占据了桌子高度的最小高度。

我在这里发现了一些关于这个的帖子，但是他们都没有帮我解决这个问题。

为什么这不起作用？

请参阅jsFiddle

编辑：我认为相关的代码：

#wrap {
      height: 100%;
      /* Negative indent footer by its height */
      margin: 0 auto -60px;
      /* Pad bottom by footer height */
      padding: 0 0 60px 0px;
    }

.parentbox {
    width: 100%;
    padding: 0px 3px 5px 5px;
    margin-bottom: 0px;
    overflow: hidden;
    min-height:100%;
    border:1px solid #000;
}

.childbox {
    overflow: auto;
    overflow-x: hidden;
    min-height:100%;
    border:1px solid #000;
}

Answer 1

.parentBox和.childBox都只有一个最小高度声明，根据我的理解，这只会深入一级 - 意味着.childBox永远不会知道实际大小100％是。

Answer 2

我不确定我理解您的问题，但请尝试从height: 100%;移除#wrap > .container。

父div不占用容器div的100％高度

3 个答案: