製作側邊欄\大小均勻的頁面

Question

因此，我製作了一個頁面，其中包含兩個簡單的側邊欄，一個位於左側，另一個位於右側。問題是，側邊欄的高度取決於其內容，頁面也是如此。因此，如果頁面內容比側邊欄內容短，它將不會顯示一個矩形\ square，但會顯示一個比頁面長的側邊欄矩形。另一方面，如果頁面內容比側邊欄長，它將擴展矩形並「擴展」邊欄空白，但是，該空白是頁面而不是邊欄。頁面的結構是這樣的：

<div id="page"> 
    <div id="sidebar1"> 
    </div> 
    <div id="sidebar2"> 
    </div> 
    <div id="pageContent"> 
    </div> 
</div> 

Answer 1

使用display:inline-block;和Width Demo Here

#sidebar1{ 
 
    display:inline-block; 
 
    width:24%; 
 
    background:red; 
 
    height: 300px; 
 
} 
 

 
#sidebar2{ 
 
    display:inline-block; 
 
    width:24%; 
 
    background:blue; 
 
    height: 300px; 
 
} 
 

 
#pageContent{ 
 
    display:inline-block; 
 
    width:50%; 
 
    background:green; 
 
    height: 300px; 
 
}

<div id="page"> 
 
    <div id="sidebar1"> 
 
    </div> 
 
    <div id="sidebar2"> 
 
    </div> 
 
    <div id="pageContent"> 
 
    </div> 
 
</div>