CSS包裝內容其他填充再造高度

有問題我一直想弄明白幾個小時吧！我正在自己的網站ATM上工作，並且我有3個div，一個標題（靜態高度），主要（動態高度）&頁腳（靜態高度）。問題是我想讓我的主div始終填充剩餘的屏幕空間 - 但是如果主內容超出了剩餘的屏幕空間，它應該環繞它。CSS包裝內容其他填充再造高度

我不是很確定爲什麼我不能讓它工作。我嘗試了很多不同的東西，比如：display：table，overflow等等，但它們似乎都沒有達到預期的效果。

，我想這與純CSS完成，但我似乎有點失去了 - 所以，如果任何人都可以在正確的方向指向我，我將是一個快樂的冠軍:)

來源

2014-02-10 user3238663

是否有一個示例頁面或JS提琴。 –

請客觀重寫您的問題，包括涉及的代碼。 – helderdarocha

我不知道到底你在說什麼，但試試這個：

CSS：

div.main{ 
    width: 99%; 
    max-width: 99% 
}

（我給它99％的原因，就是經常100％是有點多。）

的MAX-寬度應該使它沒有得到廣泛的。

來源

2014-02-10 02:05:59 PixelAcorn

這應該解決您的問題！如果你想知道更多它的工作原理，我寫了評論。

這裏是的jsfiddle： http://jsfiddle.net/Vuc5F/5/

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
body, body * { 
    border: red 1pt solid; 
    margin:0; 
    padding:0; 
} 
header, footer { 
    height: 100pt; 
} 
section { 
    width: 100%;  
    clear: both; 
    border: blue 5pt solid; 
} 
article { 
    height: 1000px; 
    border: green 10pt solid; 
} 
footer { 
    /*set it to absolute to make it stay at the bottom only;*/ 
    width: 100%; 
} 
    </style> 
</head> 
<body> 
<header>header</header> 
<section> 
    <article> 
     article 
    </article> 
</section> 
<footer>footer</footer> 
</body> 
</html>

來源

2014-02-10 02:19:34 tom10271

可能還沒有清除，我不想在我的「主」（在你的小提琴，＃部分）滾動條。如果有更多的「內容」可以適應屏幕，我希望該部分超出屏幕高度。 – user3238663

我已經更新了代碼，請檢查它。順便說一句，我猜你的意思只是很難理解你在說什麼。 – tom10271

CSS包裝內容其他填充再造高度

回答

相關問題