如何擴展div高度與窗口一樣高？

我有一個共同頁面structure與固定標題和粘腳。但我無法解決如何擴展div高度以填滿整個窗口區域。如何擴展div高度與窗口一樣高？

HTML

<header> 
    header header header 
</header> 

<div id="page"> 
    <div id="left">side bar side bar</div> 
    <div id="right"> 
    <p>I want to draw the brown dashed line all the way down to the footer even when the #right content is too little to fill the window.</p> 
    <p>I know that I have to set height 100% on #right so that it stretches to fill the green box. But, the green box itself does not stretch to the bottom despite height 100% because the yellow box does not have explicit height defined.</p> 
    <p>What can I do?</p> 
    </div> 
</div> 

<footer> 
    footer footer footer 
</footer>

CSS

html, body, foot, header, div { padding: 0; margin: 0; box-sizing: border-box; } 
p { margin-top: 0 } 
html { height: 100%; min-height: 100%; } 
header { position: fixed; background-color: red; height: 50px; width: 100%; } 
footer { position: absolute; bottom: 0; width: 100%; background-color: cyan; } 
body { 
    position:relative; /* container for footer */ 
    border: 5px solid yellow; 
    min-height: 100%; /* not explicitly setting height to allow footer to be pushed downwards */ 
} 
#page { 
    padding: 60px 0 20px 0; 
    border: 5px solid green; 
    height: 100%; /* not working: how to extend page all the way to the bottom, min-height = fill the window? */ 
} 
#page:after { content:""; display: block; clear:both; } 
#left { float: left; width: 100px; } 
#right { 
    margin-left: 100px; 
    padding-left: 10px; 
    /* objective: to create vertical divider between #right and #left that extends to the footer */ 
    height: 100%; 
    border-left: 5px dashed brown; 
}

來源

2014-09-04 Jake

您可以使用絕對定位，使的div總是0像素從窗口的頂部和底部的路程。您可能需要玩的價值，但這樣的事情應該工作：

#left { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; } 
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; }

編輯：Here's a fiddle，顯示這是怎麼工作的。

來源

2014-09-04 03:44:47 tomaroo

的'寬度：100％'與'填充左：200px'需要用'盒大小：邊界box'像預期的那樣。 – tomaroo 2014-09-04 03:47:08

如果我想要居中左右，還有可能嗎？ http://jsfiddle.net/wetjyLy3/3/ – Jake 2014-09-04 04:21:54

@Jake你是什麼意思，'中心'的權利和左派？ – tomaroo 2014-09-04 15:02:37

好吧，身高100％不能正常工作的原因是身體根本沒有身高，身高取決於身體內的物品。

有一個變通爲此

應用以下到您的樣式。

html, html body { 
    height: 100%; 
} 
#page { /* If #page is a lvl 1 child of body, this should work */ 
    height: 100%; 
}

這裏是的jsfiddle

http://jsfiddle.net/wetjyLy3/1/

來源

2014-09-04 03:45:58 Allan

我認爲這會導致粘腳不再粘。 – Jake 2014-09-04 03:46:34

它取決於如何創建粘性頁腳CSS和HTML，但這兩個DOM元素可以配置爲一起工作。我知道這是因爲我有幾個站點，頁腳很粘，頁面高度爲100％ – Allan 2014-09-04 03:51:27

我剛剛查看了我對jsFiddle的解決方案，並且正在運行 – Allan 2014-09-04 03:56:58

如何擴展div高度與窗口一樣高？

回答

相關問題