Question

这是一个片段：

* { padding: 0; margin: 0; }
html, body, #nav, #main {
    min-height: 100% !important;
    height: 100%;
}

#nav {
    background: #4D394B;
    width: 20%;
    float: left;
}

#main {
    background: #FAFAFA;
    width: 80%;
    float: left;
}

<html>
  <body>
    <div id="nav">Foo</div>
    <div id="main">Bar</div>
  </body>
</html>

但#nav和#main div的内容只有20px左右。

Answer 1

这是绝对定位的替代方案。试试这个：

* {
    padding:0; 
    margin:0;
}
#nav, #main {
    bottom:0;
    position:absolute;
    top:0;
}
#nav {
    background:#4D394B;
    left:0;
    width:20%;
}
#main {
    background: #f00;
    left:20%;
    right:0;
    width: 80%;
}

<div id="nav">Foo</div>
<div id="main">Bar</div>

Answer 2

以下是适合您的解决方案

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

#nav {
  width: 20%;
  height: 100%;
  float: left;
  background: #ddd;
}

#main {
  width: 80%;
  height: 100%;
  float: left;
  background: #ccc;
}

<!doctype html>
<html>
  <body>
    <div id="nav">Foo</div>
    <div id="main">Bar</div>
  </body>
</html>

Answer 3

您可以使用android:descendantFocusability="blocksDescendants"单位，即＆＃34;视口高度＆＃34;，如果它符合您的需要：

vh

如果您不需要，则无需设置html, body, #nav, #main { height: 100vh; }和html的高度。
body单位相对于视口高度，因此元素的高度（使用vh设置）不受父元素高度的影响。

vh等于视口高度的100％。

请在使用之前检查浏览器的support。

无法使div真正达到100％的高度

3 个答案: