HTML/CSS: как сделать так, чтобы боковая панель и контент следовали друг за другом

Question

Мне нужна боковая панель и область содержимого. Я хочу иметь одинаковую высоту для обеих секций. Поэтому, если я хочу указать цвет фона для боковой панели, он будет следовать за областью содержимого, даже если содержимое боковой панели будет не таким высоким, как раздел содержимого, и наоборот. Я хочу сделать это только на чистом HTML и CSS, поэтому никаких трюков с JavaScript.

Answer 1

Единственный реальный способ сделать это кросс-браузерным способом - с помощью таблиц.

Когда содержимое добавляется в ячейку боковой панели ниже, это приведет к расширению всей строки, что, в свою очередь, также приведет к расширению ячейки contentArea. Вы можете стилизовать их индивидуально с помощью CSS.

<style>
  #sideBar { vertical-align:top;}
  #contentArea { vertical-align:top;}
</style>
<table>
  <tr>
    <td id="sideBar">SideBar</td>
    <td id="contentArea">content area</td>
  </tr>
</table>

Answer 2

Эта превосходная статья об A List Apart создает такой макет с нуля, а также содержит некоторые интересные ссылки на другие статьи по этой теме, такие как Faux Columns (также об ALA).

Answer 3

По сути, просто установите высоту боковой панели равной 100%, и она будет следовать за высотой родительского элемента. В приведенном ниже примере это элемент контейнера. Независимо от высоты, высота боковой панели будет равна 100% и, следовательно, всегда будет такой же, как у контейнера.

<div id="wrapper">
  <div id="container">
      <div id="sidebar"></div>
  </div>
</div>

<style>
#wrapper {}
#container {min-height:500px;}  (or whatever you want for the height)
#sidebar {height:100%;}
</style>