2016-05-17 68 views
1

我试图让每个div都适合浏览器页面的高度和宽度。当我看到它们时,我也需要连接到页面的边缘,直到我向下滚动到下一个div。我怎么做?fit div to browser page

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    height: auto; 
 
    width: 100%; 
 
    color: #fff; 
 
} 
 
.div1 { 
 
    background: #555; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
.div2 { 
 
    background: #ccc; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.div3 { 
 
    background: #c55; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.div4 { 
 
    background: #006; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
}
<div class="container"> 
 
    <div class="div1">DIV 1</div> 
 
    <div class="div2">DIV 2</div> 
 
    <div class="div3">DIV 3</div> 
 
    <div class="div4">DIV 4</div> 
 
</div>

+0

[div height 100%并展开以适合内容]的可能重复(http://stackoverflow.com/questions/9537838/div-height-100-and-expands-to-fit-content) – jobbert

回答

0

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    height: 100%; 
 
    width: 100%; 
 
    color: #fff; 
 
} 
 
.div1 { 
 
    background: #555; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
.div2 { 
 
    background: #ccc; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.div3 { 
 
    background: #c55; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.div4 { 
 
    background: #006; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
}
<div class="container"> 
 
    <div class="div1">DIV 1</div> 
 
    <div class="div2">DIV 2</div> 
 
    <div class="div3">DIV 3</div> 
 
    <div class="div4">DIV 4</div> 
 
</div>

0

.container已经有height: 100%;否则在它的DIV不会得到他们 100%的高度。