CSS專欄devilry：一個粘性div與它之間的自動伸展div？

我應該從說我研究過這個問題開始。我找不到任何完全相同的問題或者我所追求的問題。CSS專欄devilry：一個粘性div與它之間的自動伸展div？

我希望能夠將一些內容放在頁面的左下角，然後在上面有一個div，它自動拉伸以使用頁面頂部和頁面頂部之間的所有空間左下角，即使用戶調整了窗口大小。

請看下圖。

我把左下角的內容定位在position: absolute; bottom: 10px;，這是有效的。所以然後我理想地將它上面的div自動拉伸以填充很大的間隙（即）：

[stretchy_div_height] = [100%] - [height_of_bottom_div] - [bottom_div_margin]。

理想情況下，我希望在沒有JavaScript的情況下做到這一點，如果可能的話。但無論哪種方式都很好。我不能在高度拉伸div上使用虛擬列（我需要真正的內容）。

謝謝！

這裏是我的目標，實現的圖像：

來源

2011-04-29 BigJeffrey

參見：http://jsfiddle.net/zSeLS/

CSS：

html, body { 
    margin: 0; 
    padding: 0 
} 
#left { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    bottom: 60px; 
    width: 120px; 
    background: #ccc 
} 
#leftButton { 
    position: absolute; 
    left: 10px; 
    bottom: 10px; 
    height: 40px; 
    width: 120px; 
    background: #f0f 
} 

#content { 
    margin: 10px 10px 10px 140px; 
    background: #999 
}

HTML：

<div id="left"></div> 
<div id="leftButton"></div> 

<div id="content"> 
    some content<br /> 
    .. 
</div>

來源

2011-04-29 23:18:08 thirtydot

絕對完美。非常感謝你。只是出於興趣 - 如何改變這種方式，讓#content直接放在#leftButton下方，如果它的高度大於初始頁面框架？也就是說，如果我有很多#content，它是否可以包裝到左側，在#leftButton下面？謝謝！ – BigJeffrey 2011-04-30 01:52:42

實際上，更新：在Chrome中，這似乎有不同的表現。 #left和#leftButton之間的空間比Firefox大得多，儘管#leftButton隨着窗口大小的改變而移動，但是#left div卻沒有，這意味着它的底部在調整大小的時候懸在窗口的下方。奇怪的！ – BigJeffrey 2011-04-30 02:06:31

更新2：對不起。我的CSS被擰緊了。沒關係！ – BigJeffrey 2011-04-30 02:12:01

你必須創建一個div將包括用於左欄的頁腳DIV ..

像

<div id="content"> 
    <div id="left"> 
    <div id="columnleft></div> 
    <div id="footerleft"></div> 
    <div> 
    <div id="right"></div> 
<div> 

did you try it already?

來源

2011-04-29 23:14:53 alemur

我確實嘗試過，但無法獲得CSS。不管怎樣，謝謝你！ :) – BigJeffrey 2011-04-30 01:52:57

thirtydot的解決方案是好的，但有時我發現含元素的絕對定位是有點太不靈活，例如如果你想中心你的佈局。你仍然可以這樣工作，但作爲替代，你可以浮動相關的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <title></title> 
    <style type="text/css"> 
    html { 
    height:100%; 
    } 
    body { 
    height:99%; 
    width:800px; 
    margin:0 auto; 
    padding:0; 
    } 
    #left-top { 
    position:relative; 
    float:left; 
    width:200px; 
    height:100%; 
    background:#ffcccc; 
    } 
    #left-bottom { 
    position:absolute; 
    bottom:0; 
    width:200px; 
    height:20px; 
    background:#ccffcc; 
    } 
    #right { 
    float:left; 
    width:600px; 
    background:#ccccff; 
    } 
    </style> 
</head> 

<body> 

    <div id='left-top'> 
    <p>Left</p> 
    <div id='left-bottom'>Bottom</div> 
    </div> 

    <div id='right'> 
    <p>Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content</p> 
    </div> 

</body> 
</html>

來源

2011-04-30 00:10:48 squidbe

這幾乎奏效！但它導致出現一個垂直滾動條，＃左下角呈現在屏幕視圖的正下方。奇怪。不過，我會進一步嘗試。謝謝！ – BigJeffrey 2011-04-30 01:53:37

嗯，這是令人費解的。我故意設置的高度爲99％，在底部有一個間隙 - 所有元素都應該完全可見，沒有滾動條（除非您將窗口的寬度縮小到800px以下，在這種情況下，您將獲得水平滾動條）。我想不出會推動什麼。你有沒有修改CSS？你在看什麼瀏覽器？ – squidbe 2011-04-30 06:29:49

CSS專欄devilry：一個粘性div與它之間的自動伸展div？

回答

相關問題