Question

我有下面的HTML，我希望容器div伸展到窗口的整个高度。这适用于葡萄酒，但当您移除容器内的两个蓝色div时会发生什么？容器延伸到其内部的蓝色div的底部，但不延伸到窗口的底部。溶液

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title></title>

   <style>
      body, html {
         min-height: 100%;
         padding: 0;
         margin: 0;
      }

      #container {
          height: 100%;
          background: coral;
          padding: 0;
          margin: 0;
          width: 63.4%;
          margin-left: 36.6%;
          min-height: 100%;
      }
  </style>
</head>
<body>
  <div id="container">
     <div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"></div>
     <div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"></div>
     <div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"></div>
  </div>
</body>
</html>

Answer 1

如果你想坚持使用CSS，解决方案是使用＆＃39; vh＆＃39;安装了＆＃39;％＆＃39;在风格。 vh表示视口高度（1vp = viewPort的1％，2vh =视口的2％....）

所以

#container {
  height: 100vh;  
  min-height: 100vh;
 ...
}

应该解决你的问题。（适用于所有主流浏览器：http://caniuse.com/#search=vh）

Answer 2

如果您希望容器始终具有视图的高度，那么只需使用100vh代替100%

#container {
          height: 100vh; 
          background: coral;
          padding: 0;
          margin: 0;
          width: 63.4%;
          margin-left: 36.6%;
          min-height: 100%;
      }

希望这有帮助！

Answer 3

将body, html样式更改为：

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

OR

#container {
  min-height: 100vh;
}

Answer 4

使用下面提到的代码：

body, html {
    height: 100%;
    padding: 0;
    margin: 0;
}
#container {
    min-height: 100%;
    background: coral;
    padding: 0;
    margin: 0;
    width: 63.4%;
    margin-left: 36.6%;
}

Answer 5

你不需要最小高度，只需设置高度：100％;

＆＃13;

          body, html {
             height: 100%;
             padding: 0;
             margin: 0;
          }

          #container {
              height: 100%;
              background: coral;
              padding: 0;
              margin: 0;
              width: 63.4%;
              margin-left: 36.6%;
          }

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="container">
    <div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"></div>
  </div>
</body>
</html>

＆＃13;

html - 拉伸容器高度以适应屏幕

5 个答案: