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

我有下面的HTML，我想要容器div拉伸到窗口的整个高度。这适用于葡萄酒，但是当您移除容器内的两个蓝色div时会发生什么？容器延伸到里面的蓝色div的底部，但不延伸到窗口的底部。解？html - 拉伸容器高度以适应屏幕

的jsfiddle：https://jsfiddle.net/xnt014a8/

<!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>

来源

2016-03-31 Mister_L

如果你想坚持的CSS的解决方案是使用了 'VH' instaed在风格的 '％'。 VH表示视口的高度（1VP视口的= 1％，视口的2VH = 2％....）

所以

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

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

来源

2016-03-31 11:53:38 mikesp

它的简单，如果你想使容器总是有视线的高度，只是用100vh代替100%

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

希望这有助于！

来源

2016-03-31 11:53:51 Roman

更改body, html风格：

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

#container { 
    min-height: 100vh; 
}

来源

2016-03-31 11:54:22 Pimmol

-1

你不需要的最小高度，只是简单的设置高度：100％;.下面

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

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

<!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>

来源

2016-03-31 11:54:52 Maki

使用提到的代码：

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%; 
}

来源

2016-03-31 12:25:54

当3周蓝色的div都存在，我仍然可以看到最低蓝色div的底部和底部之间的小的白色间隙的窗户。 –

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

回答

相关问题