Question

我有两个div设置显示：table-cell;所以他们并排坐在一起，显示一行div：table-row;最后是一个带有display：table;的#main div。所有父元素的高度都是100％，但#main div不会去。我已经尝试了一切我能想到的东西来修复它并希望它能让我感到很简单。以下是我的代码。

样式

userRepository.updateLastname("uniqueUsername", "Archer");

HTML

* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}

#container {
    position: relative;
    min-height: 100%;
}

header {
    background: #1A446C;
    width: 100%;
    height: 50px;
    padding: 2% 0 0 2%;
}
header h1 {
    color: #D4E6F4;
    font-size: 25px;
}

#main {
    background: #FDE8A5;
    display: table;
    width: 100%;
    height: 100%;
    /*padding-bottom: 50px;*/
    border: 1px solid red;
}
#row {
    display: table-row;
    height: 100%;
}
nav {
    background: #8D0D19;
    display: table-cell;
    width: 16%;
    height: 100%;
    padding: 0 2% 0 2%;
}
nav ul {
    margin: 0px 0px 0px 15px;
}
nav ul li {
    color: #FFF;
}

#page {
    display: table-cell;
    width: 76%;
    height: 100%;
    padding: 0 2% 0 2%;
}
#page ul {
    margin: 0px 0px 0px 35px;
}
#page h2, #page p {
    margin: 0px 0px 15px 0px;
}

footer {
    background: #1A446C;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    padding: 15px 0px 15px 0px;
    color: #D4E6F4;
    text-align: center;
    clear: both;
}

Answer 1

#main {
        background: #FDE8A5;
        display: table;
        width: 100%;
        height: 100vh;
        /*padding-bottom: 50px;*/
        border: 1px solid red;
    }

vh而非%更改了View port Height JSFIDDLE

有一些相对较新的CSS3测量单位叫做：

Viewport-Percentage (or Viewport-Relative) Lengths

什么是视口 - 百分比长度？

来自上面链接的W3候选推荐标准：

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度改变时，它们相应地缩放。这些单位是vh（视口高度），vw（视口宽度），vmin（视口最小长度）和vmax（视口最大长度）。

如何使用它来使分隔符填满浏览器的高度？

对于这个问题，我们可以使用vh：1vh等于视口高度的1％。也就是说，100vh等于浏览器窗口的高度，无论元素在DOM树中的位置如何：

希望这有帮助

即使父母元素高度为100％，Div也不会达到100％的高度

1 个答案: