CSS Div拉伸100％页面高度

 

我的页面左侧有一个导航栏，我希望它可以延伸到页面高度的100％。 不仅仅是视口的高度，还包括在您滚动之前隐藏的区域。 我不想使用JavaScript来实现这一点。

它可以在HTML / CSS中完成吗？

下面是我使用div作为动态背景的容器时最终提出的解决方案。

  • 删除非背景用途的z-index 。
  • left或right一个完整高度的列。
  • 删除全宽行的top或bottom 。

    • 编辑1：下面的CSS已被编辑，因为它没有在FF和Chrome中正确显示。 移动position:relative对于HTML上，并将身体设置为height:100%而不是min-height:100% 。

    编辑2：添加额外的评论给CSS。 上面增加了一些更多说明。

    CSS： 

    html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

    html： 

    <!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

    为什么？ 

    html{min-height:100%;position:relative;}

    如果没有这个，云容器DIV将从HTML的布局上下文中移除。 position: relative确保DIV在绘制时保留在HTML框内，以便bottom:0指向HTML框的底部。 您也可以在云容器上使用height:100% ，因为它现在指的是HTML标记的高度，而不是视口。

    使用HTML5，最简单的方法就是做height: 100vh 。 'vh'代表浏览器窗口的视口高度。 响应浏览器和移动设备的大小调整。

    你可以使用仿列作弊或者你可以使用一些CSS欺骗手段

    链接地址: http://www.djcxy.com/p/89161.html

    上一篇: CSS Div stretch 100% page height

    下一篇: Combine different colours with opacity to create target colour