只能達到視口100％的容器div

我搜索了四周，發現了很多解決方案來解決這個問題，其中沒有一個似乎適用於我。只能達到視口100％的容器div

我試圖讓.containerBody div一直延伸到頁面的底部。加載頁面時看起來很好，但在包含需要滾動查看的內容的頁面上，.containerBody div將在視口底部（或加載頁面時視口底部）結束。對於內容適合初始屏幕的頁面，這顯然不是問題。對於任何有更多內容的頁面，.containerBody只是部分結束。

CSS

html, body { 
    padding: 0; 
    margin: 0; 
    min-height: 100%; 
    font-family: Arvo, serif; 
    font-weight: normal; 
    font-size: 11.5px; 
    color: #333; 
} 

.containerBody { 
    width: 1000px; 
    height: 1000%; 
    background-color: #FCFCFD; 
    margin: 0 auto; 
    position: relative; 
} 

#tagtop { 
    width: 240px; 
    height: 110px; 
    margin-top: 0px; 
    margin-left: 120px; 
    position: relative; 
} 

.topContent { 
    float: left; 
    clear: both; 
    width: 340px; 
    padding-left: 647px; 
    margin-top: -95px; 
    position: relative; 
    font-size: 10px; 
} 

.topContent a { 
    color: #333; 
} 

.topContent a:hover { 
    color: #E9194E; 
} 

.bonusText { 
    display: inline; 
    font-family: Arvo,serif; 
    font-size: 13.25px; 
    font-weight: bold; 
    color: #E9194E; 
}

HTML

<body> 
<div class="containerBody"> 
    <div id="tagtop"> <a href="index.html"><img src="image.png"</img> 
    <h1>Text<div class="bonusText">text</div></h1></a> 
    </div> 
    <div class="topContent"> 
     Text 
     <a href="www.google.ca">Link1</a> 
     <a href="www.google.ca">Link2</a> 
    </div> 
    <div class="workcontainer"> 
     Title<br><br> 
     <img src="assets/placeholder.png"> 
     <div class="workwords">Text</div> 
     <div class="worktags">Text</div> 
     <img src="assets/placeholder.png"> 
     <img src="assets/placeholder.png"> 
     <img src="assets/placeholder.png"> 
    </div> 
</div> 
</body>

我用最小高度，試圖把頂部和底部位置爲0試過，但我還沒有成功使容器伸展到頁面的底部，而不是加載視口的底部。幫幫我？

來源

2013-06-11 user2475587

爲什麼你使用'高度：1000％;''裏面.containerBody'？ – 2013-06-11 19:33:35

你需要給你的身體100％的寬度，你的身高100％，並設置你的顯示器阻止。

.containerBody { 
width : 1000px; 
height :100%; 
background-color: #ccc; 
margin: 0 auto; 
display: block; 
} 
html, body { 
padding:0; 
margin:0; 
min-height:100%; 
font-family:Arvo, serif; 
font-weight:normal; 
font-size:11.5px; 
    color:#333; 
height: 100%; 
width: 100%; 
}

見我jsfiddle

來源

2013-06-11 19:36:19 Cam

這對我不起作用，我不確定爲什麼 – user2475587

你能告訴我通過CSS更改了哪些元素嗎？或者你直接複製它。 – Cam

我剛剛改變了.containerBody div（通過添加一個display：block;並將height設置爲100％）和html body（通過給它一個100％寬度） – user2475587

只能達到視口100％的容器div

回答

相關問題