100％容器高度問題--HTML5/CSS2/3

簡單的問題，雖然顯然不是一個簡單的解決方案。100％容器高度問題--HTML5/CSS2/3

基本上該網站由兩列，但沒有包裝或類似的東西，因爲我真的想用盡可能少的那種儘可能的做，一方面爲求簡單，但也要利用HTML5的語義，在我看來，它並不包含divs，無論它們被命名得多麼恰當。

但是，我想讓邊欄填滿相鄰列的整個高度，這並不像我第一次想到的那樣容易。我知道這是一個老問題，但我確信我之前已經解決了它。

無論如何，我試圖找出如何做到這一點，而不使用包裝或JavaScript。 JavaScript是不行的，但這是另一回事。我確信會有某種聰明的CSS3特性或類似的東西，它可以解決我的問題，而不需要包裝器，但是我對這個需求功能的搜索卻是史詩比例失敗。

所以我對我自己說：「該死！哦，那麼就必須使用包裝紙。」

我確定它會工作。我嘗試了不同的配置，但不管我做了什麼，如果不設置周圍包裝的絕對高度，我就無法實現它。想象一下我的失望，當我確信我之前做過時，再次失敗。我再次尋找解決方案來滿足我的需求。雖然這次出現了更多的材料，但仍然是失敗。我發現的少數解決方案至少可以說是可疑的。

所以，現在我再次來到這裏，問了另一個毫無疑問已經被問了幾十億次的問題。對此我很抱歉，但我真的不知道還有什麼可去的地方。

我希望你能幫上忙。

在此先感謝和問候。

編輯：

這工作完全按照我希望它太：

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     body { 
     margin: 0 auto; 
     width: 800px; 
     } 
     #wrapper { 
     position: relative; 
     width: 800px;   
     } 
     body > header, body > footer { 
     background-color: red; 
     width: 800px; 
     } 
     #wrapper > article { 
     margin-right: 200px; 
     width: 600px; 
     background-color: blue; 
     } 
     #wrapper > aside { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     right: 0; 
     width: 200px; 
     background-color: green; 
     } 
    </style> 
    </head> 
    <body> 
    <header>This is a header</header> 
    <div id="wrapper"> 
     <article> 
     This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left 
     </article> 
     <aside> 
     And this is the sidebar! I dynamically make myself bigger based on the content on the left! 
     </aside> 
    </div> 
    <footer>This is a footer</footer> 
    </body> 
</html>

唯一留下的就是擺脫那該死的div標籤的問題;）

編輯：的CSS表顯示屬性已經被指出給我，它真的好像是我在尋找的智能解決方案，但是在一行中有多個元素，而在另一箇中只有一個元素，我不知道它應該如何做完了。

來源

2011-05-19 Zacariaz

IE6是否兼容性要求？ – 2011-05-19 23:10:25

當然不是。只有免費提供的最新瀏覽器，IE9，Firefox 4等。 – Zacariaz 2011-05-19 23:24:56

我認爲我最後一次編輯，我只是意識到，如果你知道頁眉和頁腳的高度，你應該能夠放下div包裝並使用身體代替。 – Zacariaz 2011-05-20 00:11:55

如果IE6的兼容性不是必需的，那麼我平時一般會做以下的html：

<div class="container"> 
    <div class="content"> 
     This is the content 
    </div> 
    <div class="sidebar"> 
     And this is the sidebar! I dynamically make myself bigger based on the content on the left! 
    </div> 
</div>

這是CSS：

.container { position:relative; } 
.content {margin-right:<SIDEBAR WIDTH HERE>;} 
.sidebar {position:absolute; top:0; bottom:0; right:0; width:???; }

的jsfiddle例如：http://jsfiddle.net/geC3w/

這適用於所有現代瀏覽器和Internet Explorer 7及以上版本，它也非常簡單，只要IE6兼容性不是要求

來源

2011-05-19 23:19:28

只有要求是他們最新的瀏覽器真的。 Firefox 4，IE9等。我不確定你的建議應該如何工作，但我一定會盡快查看。謝謝 – Zacariaz 2011-05-19 23:23:35

@ Zacariaz - 基本上，它將邊欄創建爲絕對定位的元素，並通過強制頂部和底部值都爲零來將其拉伸至父div的大小。如果您需要使用它，請查看我的答案中的JSFiddle鏈接，並修改HTML和CSS以適合您的內容。 – 2011-05-19 23:26:57

嗯，它當然有效，如果我足夠聰明，我甚至可以避免div。不能說我非常喜歡絕對定位，但我想我可以例外。感謝你的回答。 – Zacariaz 2011-05-19 23:34:32

如果IE7的兼容性不是必需的，使用display: table-cell;：

body { 
    margin: 0 auto; 
    width: 800px; 
} 
#wrapper { 
    position: relative; 
    width: 800px;   
} 
body > header, body > footer { 
    background-color: red; 
} 
#wrapper > * { 
    display: table-cell; 
} 
#wrapper > article { 
    width: 600px; 
    background-color: blue; 
} 
#wrapper > aside { 
    width: 200px; 
    background-color: green; 
}

Working example。

來源

2011-05-20 01:13:23 robertc

這聽起來很有意思，任何人都會關心它嗎？如果實際上我不關心IE7及以下版本，我不這麼認爲這是聰明的做法？ – Zacariaz 2011-05-20 01:30:17

@Zacariaz您試圖模擬類似桌面的功能 - 同一行中共享相同高度的元素 - 因此使用CSS表格佈局功能是有意義的。使用它們的一切主要障礙是IE7和之前缺乏支持，這使得它在許多網站上不切實際。 – robertc 2011-05-20 01:34:12

mkay。絕對定位有點容易，因爲你可以獲得XP的IE8，我真的不關心老的IE。我也修改了一下方法。請檢查一下，讓我知道是否有什麼我應該關注的：http://jsfiddle.net/qFKA2/5/基本上我已經刪除了包裝和瀏覽器的可比性。同樣的位置：相對，似乎沒有必要。 – Zacariaz 2011-05-20 01:42:39

100％容器高度問題--HTML5/CSS2/3

回答

相關問題