使div 100％浏览器窗口的高度

2018-06-14 13:55:54

我的网站有两列，现在背景颜色在左栏的最后一段内容（用于导航）结束。

我试过身高：100％，最低身高：100％; 等似乎没有工作。这是CSS。

.container {
    width: 100%;
    height:100%;
    min-width: 960px;
    background: #fbf6f0;
    margin: 0 auto; 
    overflow: hidden;
}

#sidebar1 {
    float: left;
    position:absolute;
    width: 20%;
    height:100%;
    min-width:220px;
    background: none repeat scroll 0% 0% #007cb8;
    z-index:9999;
}

使用视口高度 - vh。

.container {
height: 100vh;
}

更新

请注意，在Safari iOS上使用VH存在潜在的问题。有关更多信息，请参阅此主题：Chrome / Safari未填充flex父级的100％高度

设置身高

body,html{
  height:100%;
}

div {
  height:100%
}

之所以div默认不填充整个窗口，是因为它是父项， <body>标记可能只是根据需要高度延伸。将其添加到样式表顶部（我喜欢按照与标记中标记类似的顺序排序样式）：

html, body {
    height:100%;
    min-height:100%;
}

编辑：语法

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

上一篇: Making div 100% height of browser window

下一篇: Jquery.height() returns different results using F5 or CTRL+F5