制作侧边栏\大小均匀的页面

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>