因此,我正在制作一个包含 2 个简单侧边栏的页面,一个在左侧,一个在右侧。问题是,侧边栏的高度取决于其内容,页面也是如此。因此,如果页面内容比侧边栏内容短,它不会显示单个矩形\正方形,但会显示比页面长的侧边栏矩形。另一方面,如果页面内容比侧边栏长,它会扩展矩形并“扩展”侧边栏空白,但是,该空白是页面的而不是侧边栏的。页面的结构是这样的:
<div id="page">
<div id="sidebar1">
</div>
<div id="sidebar2">
</div>
<div id="pageContent">
</div>
</div>
最佳答案
使用 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>
关于html - 使侧边栏\页面大小均匀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43170417/