html - 使侧边栏\页面大小均匀

Question

因此，我正在制作一个包含 2 个简单侧边栏的页面，一个在左侧，一个在右侧。问题是，侧边栏的高度取决于其内容，页面也是如此。因此，如果页面内容比侧边栏内容短，它不会显示单个矩形\正方形，但会显示比页面长的侧边栏矩形。另一方面，如果页面内容比侧边栏长，它会扩展矩形并“扩展”侧边栏空白，但是，该空白是页面的而不是侧边栏的。页面的结构是这样的:

<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>