CSS - 堆疊的DIV佈局

我正在尋找兼容的CSS佈局，它將支持以下內容;CSS - 堆疊的DIV佈局

+-----+--------+ 
| A | C  | 
+-----+  | 
| B |  | 
|  |  | 
|  |  | 
+-----+--------+

C是整個事情的容器。 A是根據其內容（即，它不是固定高度）的高度可變的div。 B是直接顯示在A下面的div，並且一旦A拿走了它的份額，就從C填充剩下的高度。

我希望有一個非Javascript，非表的解決方案，希望！

編輯：我還應該補充說，'C'代表一個具有設定高度的容器。在我目前的頁面中，它是瀏覽器窗口高度的100％。

來源

2012-03-29 Barg

你要什麼才達到 - 爲什麼是B有舒展結束了嗎？如果它不僅僅設置A上的浮動和A和C上的寬度，另一種選擇是使用CSS框架如骨架，twitter引導或藍圖讓生活更輕鬆 – WKordos 2012-03-29 11:22:09

您可以display:table財產像這樣實現的：

HTML

<div class='wrapper'> 
    <div class='left'> 
     <div class="table"> 
     <div class='a'>a</div> 
      <div class='b'>b</div> 
     </div> 

    </div> 
    <div class='c'>c</div> 
</div>

CSS

.wrapper{ 
    display:table; 
    width:100%; 
    height:500px; 
} 
.wrapper > div{ 
    display:table-cell; 
    width:50%; 
} 
.table > div{ 
    display:table-row; 
} 
.left{background:yellow} 
.a{ 
    background:red; 
} 
.b{ 
    background:green; 
} 
.c{ 
    background:blue; 
} 
.table{ 
    display:table; 
    width:100%; 
    height:100%; 
}

入住這http://jsfiddle.net/X5Ze4/

來源

2012-03-29 12:17:36 sandeep

這個效果很好，除了a和b是相同的高度 - 我想要一個小到它所需要的，並且b到填補其餘。我設法通過增加高度來解決這個問題：0;到一個班級。請參閱：http://jsfiddle.net/Ywtwv/不漂亮，但它的作品 – Barg 2012-03-30 16:16:18

試試這個

<div id='wrapper'> 
    <div id='sidebar'> 
      <div class='a'></div> 
      <div class='b'></div> 
    </div> 
    <div id='main-content'> 

    </div> 
</div>

然後根據您的需要應用的風格。

例如，

div#wrapper 
{ 
    min-height:500px; 
}

來源

2012-03-29 11:25:02

我應該說 - C是一組高度。具體來說，它是瀏覽器窗格的整個高度。 – Barg 2012-03-29 11:50:53

我認爲你正在尋找這樣的： -

HTML

<div id="c">ccccccccc 
<div class="a">asfdaaaaaaaaas</div> 
<div class="b">adffffffssssssssssssssssssssss</div> 
</div>

CSS

#c { 
background:red; 
} 
.a { 
background:blue; 
width:200px; 
float:left; 
clear:both; 
} 
.b { 
background:yellow; 
width:200px;

}

看到了現場演示： - http://jsfiddle.net/PAJzK/16/

來源

2012-03-29 11:40:19

不完全 - 在這裏，我已經修復了容器高度：http://jsfiddle.net/3cr3x/ – Barg 2012-03-29 11:49:34

使用最小高度或高度：auto;而不是固定的高度：-http：//jsfiddle.net/3cr3x/2/ – 2012-03-29 11:59:13

我了個去，並拿出了這一點，雖然內容B被設置爲隱藏溢出，所以要小心在裏面放東西時，你必須考慮什麼內容A.

HTML

<div id='wrapper'> 
<div id='sidebar'> 
     <div class='a'>Content A</div> 
Content B 
</div> 
<div id='main-content'> 
Main Content 
</div> 
</div>

CSS

html,body{ 
margin:0; 
padding:0 
} 
#wrapper{ 
float:left; 
width:100%; 
height:100%; 
background-color:green; 
} 
#sidebar{ 
float:left; 
position:absolute; 
width:30%; 
height:100%; 
background-color:red; 
overflow:hidden; 
} 
.a{ 
float:left; 
position:reative; 
width:100%; 
background-color:orange; 
min-height:33%; 
} 
#main-content{ 
float:left; 
position:absolute; 
width:70%; 
min-height:100%; 
left:30%; 
background-color:yellow; 
}

該CSS可能可以做凝結，但這就是我如何去做。

[編輯：我會用Sandeep的解決方案]

演示：http://jsfiddle.net/AnBWP/

來源

2012-03-29 12:06:22 number8pie

CSS - 堆疊的DIV佈局

回答

相關問題