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

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

3 голосов
/ 07 июля 2010

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

Ответы [ 3 ]

4 голосов
/ 07 июля 2010

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

1 голос
/ 07 июля 2010

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

Когда содержимое добавляется в ячейку боковой панели ниже, это приведет к расширению всей строки, что, в свою очередь, также приведет к расширению ячейки 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>
0 голосов
/ 11 декабря 2012

В основном просто установите высоту боковой панели равной 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>
...