100％可擴展的外部保證金集裝箱分區

我需要一個100％寬度，100％高度的容器，20px的邊距隨內容擴展。這是可能嗎？我得到的最接近是用這種方法：

#container { 
    position:absolute; 
    top:0; 
    bottom:0px; 
    left:0; 
    right:0; 
    margin:20px; 
}

但隨後它不會在高度與內容展開。

有人知道這個神聖的技術？

來源

2011-07-28 Esben

我不能完全想象你在問什麼。你能解釋更多嗎？ – thirtydot

是的。我需要一個div，它的高度爲100％，寬度爲100％，但寬度爲20px。像這樣：http://manual.businesstool.dk/screen.jpg 讓我知道，如果沒有幫助？：P – Esben

我敢肯定這是不可能用單一元素的事，但如果你不介意有3個間隔div元素，該解決方案適用於所有的瀏覽器：

<html> 
<head> 
<style type="text/css"> 
* { 
    margin: 0; 
} 
html, body { 
    height: 100%; padding: 0; /* padding 0 is for jsfiddle */ 
} 
#wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-left: 20px; 
    margin-right: 20px; 
    margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */ 
    background-color: #ccc; 
} 
.spacer.edge { 
    background-color: white; /* same as body background */ 
} 
.spacer { 
    height: 20px; 
} 

</style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div class="spacer edge"></div> 
     <!-- content here --> 
     <div class="spacer"></div> 
    </div> 
    <div class="spacer edge"></div> 
</body> 
</html>

這裏玩小提琴：http://jsfiddle.net/dTyTW/

來源

2011-07-28 12:52:54

您的原始解決方案（http://jsfiddle.net/dTyTW/）即使在IE6中也能正常工作，但當內容很少時，您的更新版本在所有瀏覽器中都會失敗。你應該回到原來的解決方案，我認爲這正是OP正在尋找的東西。 – thirtydot

@thirydot heh我只測試了Chrome中的更新版本。恢復到以前。感謝您的領導！ –

這就像一個魅力！非常有創意的工作;）贊成沒有js，並且它適用於所有瀏覽器。謝謝！ – Esben

刪除margin並給予每個職位20px。

也刪除bottom。

添加padding-bottom:20px;

#container { 
    position:absolute; 
    top:20px; 
    left:20px; 
    right:20px; 
    padding-bottom:20px; 
}

http://jsfiddle.net/jasongennaro/w7dQP/3/

編輯

如果你不反對使用一些jQuery的，你也可以做到這一點

var h = $(document).height(); 
var h2 = $('#container').height(); 

if(h2 < h){ 
    $('#container').height(h); 
}

這ensu如果div小於瀏覽器視口，它將展開以適應它。

一旦文字一樣大或更大，樣式就會照顧它。

http://jsfiddle.net/jasongennaro/w7dQP/8/

來源

2011-07-28 12:08:55

它不是100％身高 – Esben

你是對的@Esben。這僅適用於內容已經達到屏幕高度的100％或更多的情況。 –

如果內容小於屏幕高度的100％，請參閱上面的我的編輯。 –

我要擴大與內容股利，那麼你需要設置的位置是：相對的，爲了堅守對底部填充，底部還需要進行設置。

#container { 
position:relative; 
top:20px; 
bottom:20px; 
left:20px; 
right:20px; 
padding-bottom: 80%; 
border:1px solid red;

}

值可以調節按要求。嘗試here

來源

2011-07-28 12:22:41 Muse

這也不起作用，它擴展到窗外，即使它是空的。這不是意圖:) – Esben

<html> 
<style> 
body 
{ 
    margin:0px; 
} 
div 
{ 
    position: absolute; 
    padding: 20px; 
} 
img 
{ 
    position: relative; 
    width: 100%; 
} 
</style> 
<body> 
    <div> 
    <img src="http://manual.businesstool.dk/screen.jpg" /> 
    </div> 
</body> 
</html>

使用padding屬性...查找框模型。

來源

2011-07-28 13:41:26

100％可擴展的外部保證金集裝箱分區

回答

相關問題