如何對齊的div裏面父DIV並填寫

Question

我使用的引導，我想對齊父內三個格沒有任何邊界：

<div id="parent" class="col-lg-12"> 
     <div id="main"> ... </div> 
     <div id="leftside"> ... </div> 
     <div id="bottom"> ... </div> 
    </div> 

DIV #bottom網頁：填寫底部父DIV從左至右高度：100像素

DIV #leftside：填補頂部左側的div＃底部與100px的

DIV #main：填寫父div的其餘部分

更新： 我的問題是不夠準確。 我想這樣的事情： jsfiddle.net/kvs72e2j 但沒有固定的財產。我希望div可以填滿父母，父母必須填寫它是超級的，但不是窗口。

Answer 1

HTML：

<div id="parent" class="col-lg-12"> 
<div id="top"> 
    <div id="leftside"> ... </div> 
    <div id="main"> ... </div> 
</div> 
    <div id="bottom"> ... </div> 

CSS：

#parent { 
    position: relative; 
    background-color: black; 
} 

#top { 
    padding-bottom: 100px; 
} 

#leftside { 
    background-color: red; 
    float: left; 
    width: 100px; 
} 

#main { 
    background-color: blue; 
} 

#bottom { 
    background-color: green; 
    position: absolute; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 

我剛剛意識到，我把它過於複雜。這裏有一個簡單的解決方案： HTML：

<div id="parent" class="col-lg-12"> 
    <div id="leftside"> ... </div> 
     <div id="main"> ... </div> 
     <div id="bottom"> ... </div> 
    </div> 

CSS：

#parent { 
    background-color: black; 
} 

#leftside { 
    float: left; 
    min-width: 100px; 
    background-color: red; 
} 

#main { 
    background-color: blue; 
} 

#bottom { 
    clear: both; 
    background-color: green; 
    height: 100px; 
}