Making div 100% height of browser window

2018-06-14 13:55:54

I have two columns for my website and right now the background color ends at the last piece of content in the left column (which is for navigation).

I've tried height:100%, min-height:100%; etc. Doesn't seem to work. here's the 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;
}

Use viewport height - vh.

.container {
height: 100vh;
}

Update

Please note, there are potential issues with using VH on Safari iOS. See this thread for more information: Chrome / Safari not filling 100% height of flex parent

设置身高

body,html{
  height:100%;
}

div {
  height:100%
}

The reason the div doesn't fill the entire window by default if because it's parent, the <body> tag probably, only stretches as heigh as it needs to. Add this at the top of your stylesheet (I like to order styles in a similar order to that of the tags in the markup):

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

edit: grammar

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

上一篇: 以文字为中心同时包含画布（左侧和右侧）

下一篇: 使div 100％浏览器窗口的高度