Как расширить боковые панели в 3 колонки жидкости, верхний и нижний колонтитулы в Dreamweaver CS4

Question

Когда я выбираю макет Dreamweaver cs4: жидкость из 3 столбцов, верхний и нижний колонтитулы, боковые панели не касаются нижнего колонтитула внизу.Если я применяю другой цвет к боковой панели1, он, кажется, просто висит на стороне.Как заставить его коснуться нижнего колонтитула?

Answer 1

Ах, я вижу, причина разрыва в том, что содержимое внутри среднего столбца толкает родительский элемент div вниз, а не боковые столбцы.Боковые столбцы будут расти только в соответствии с содержимым внутри них.

То, что вам нужно, называется искусственными столбцами.Посмотреть Список, кроме статьи

Answer 2

У меня была та же проблема с сайтом, который я создал в Dreamweaver, и вот способ, которым я решил ее:

Я использовал четыре тега div - один основной контейнер, который содержал боковую панель, основное содержимое инижний колонтитул.

Сначала добавьте и стилизуйте элементы в своей таблице стилей:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}

.sidebar_left {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}

.sidebar_right {
width: 220px;
float: right;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

Вы можете редактировать различные элементы так, как хотите, только убедитесь, что вы не изменили свойство нижнего колонтитула "ясно: как «.Нижний колонтитул даже не должен содержать ничего, если вы этого не хотите, он просто должен быть там.

Затем просто настройте свою веб-страницу следующим образом:

<div id="container">
<div class="sidebar_left"></div>
<div class="sidebar_right"></div>
<div class="content"></div>
<div id="footer"></div>
</div>

Если вам нужна дополнительная информация, вы можете прочитать об этом в моем блоге по адресу http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Дайте мне знать, если у вас есть какие-либо вопросы.Надеюсь, это поможет!