2013-08-31 56 views
1

我想讓div填充整個文檔高度,而​​不僅僅是觀點高度。當身體上設置100%身高,html和div時,div將填充視點的100%。但是,當另一個div使文檔高度超出視點,並且頁面滾動時,100%高度停留在原始視點高度。doc不是觀點的100%DIV高度

我就使後續的jsfiddle來演示該問題:

http://jsfiddle.net/728CA/1/

很抱歉,如果這是一個重複的問題,我經歷了許多其他的問題看,無法找到其作品的答案我的問題。我是開發敏感網站的新手,我非常感謝您的幫助。

CSS:

body, html { 
    height:100%; 
} 

#sidebar { 
    height:100%; 
    width:100px; 
    background:#FF00FF; 
    float:left; 
} 

#content { 
    width:200px; 
    float:left; 
} 
.clear { 
    clear:both; 

HTML:

<div id="sidebar"> 
    <nav> 
     Links 
    </nav> 
</div> 
<div id="content"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id magna iaculis, tincidunt lacus et, gravida sapien. Sed velit metus, congue ac porttitor ut, ornare euismod tortor. Fusce ultricies pulvinar ante, eget facilisis leo rutrum eu. Donec turpis dui, elementum tristique lectus vel, semper posuere nisi. Curabitur at adipiscing lectus. Duis consectetur, urna sit amet feugiat vestibulum, sapien massa facilisis lectus, vitae sagittis augue tellus et augue. Quisque vitae nisi at metus interdum mollis. Vivamus in nisi placerat, rutrum sapien varius, dapibus est. Integer pharetra enim sem, nec porttitor velit suscipit vitae. Ut suscipit, sapien eget placerat congue, justo elit sagittis arcu, a elementum dolor leo a ante. Suspendisse auctor laoreet orci, ut varius est consequat vitae. In eu libero at libero faucibus eleifend et id magna. Vivamus molestie mi eu massa aliquam, sit amet ullamcorper ante semper. Mauris dictum orci id ante porta euismod. Quisque in ultrices sapien. Ut euismod dui ac justo egestas suscipit. 

    Integer vitae pretium eros. Suspendisse sapien ipsum, feugiat sed lorem sed, vestibulum lacinia sapien. Proin quis risus at massa lobortis porta. Vestibulum pretium rhoncus dui quis volutpat. Nullam nulla erat, bibendum at mauris et, imperdiet cursus turpis. Cras quis tellus sed urna sagittis rutrum lobortis eu elit. Fusce volutpat venenatis augue a fermentum. Praesent luctus tortor felis, eget varius lacus mattis eu. Aliquam tempor, mi at venenatis ultrices, erat metus mattis risus, id convallis ante mauris quis ipsum. Pellentesque vitae sodales purus. Sed eu faucibus tellus. Nam ultricies lorem enim, vitae vestibulum risus hendrerit ac. Integer condimentum orci in arcu vehicula porta. Ut euismod tincidunt justo, ac feugiat massa. Sed id sollicitudin purus. 
</div> 
<div class="clear"></div> 
+1

這是一個浮動工具條沒有延伸到鄰居內容的高度的通病。有幾種方法 - 檢查了這一點http://stackoverflow.com/questions/1610710/need-css-sidebar-height-to-expand-with-content – Katstevens

+1

你也可以使它100%的文件,看看這裏:http://stackoverflow.com/questions/712689/css-div-stretch-100-page-height – Rich

+0

有幾種方法可以做到這一點。 @ redreggae的方法比我更喜歡,但如果出於某種奇怪的原因你不能添加容器,你可以[與CSS一起獲得相同的結果](http://jsfiddle.net/728CA/7/)。 – Moob

回答

1

看看我的更新

jsfiddle

我做了一個容器粉紅色的背景和內容有白色背景。

<div id="container"> 
    <div id="sidebar"> 
     <nav> 
     Links 
     </nav> 
    </div> 
    <div id="content"> 

    </div> 
    <div class="clear"></div> 
</div> 

CSS

#container { 
    min-height:100%; 
    background:#FF00FF; 
    width: 300px; 
} 

#sidebar { 
    width:100px; 
    float:left; 
} 

#content { 
    width:200px; 
    float:left; 
    background:#FFFFFF; 
} 
+0

我喜歡這個解決方案,我認爲這可能已經初步解決了我的問題,但是當我將我的彩色背景換成圖像時,我意識到我有更大的問題 - 因爲我試圖保持這種響應,儘管我可以放置一些固定的寬度,我試圖避免這一點。這裏另一個jsfiddle來展示問題的進展情況:http://jsfiddle.net/AcQec/ – kirgy