CSS о двухколоночном макете - PullRequest
Новая
       36

CSS о двухколоночном макете

6 голосов
/ 09 октября 2011

Я никогда не думал, что написание простого двухколоночного макета настолько сложно, используя css .... хаха

Я хочу сделать следующее:

  1. Когда высота содержимого div превышает высоту экрана, полоса прокрутки существует только в содержимом div.Пользователи могут только прокручивать содержимое div, но боковая панель остается статичной

  2. Два столбца должны иметь одинаковую высоту

    Мой макет:

<--------------- контейнер ------------------->

<------------------- шапка ------------------>

<-----боковая панель -------> <--------- content --->

<------------------ нижний колонтитул------------------->

<--- Конец контейнера ------------------------->

Вот мой файл css: http://137.189.145.40/c2dm/css/main.css

Спасибо /

Ответы [ 3 ]

2 голосов
/ 09 октября 2011 
#WorldContainer
{
     width: 1000px;
     margin: auto;
     overflow: hidden;
}

.ContentColumn
{
     float: left;
     width: 500px;
     overflow: auto;
}

<div id="WorldContainer">
   <div class="ContentColumn">
        Content goes here!
   </div>
   <div class="ContentColumn">
        Content goes here!
   </div>
</div>

Это даст вам страницу, на которой основной блок не может прокручивать, а два столбца блока могут.Они будут рядом.Ваш вопрос был не совсем ясен, так что, надеюсь, это то, что вы искали.

РЕДАКТИРОВАТЬ: В ответ на показ примера сайта.

Ваша проблема действительно проста.* Все ваши div имеют правило высоты height: 100%; Когда вы используете процентную высоту, вы делаете его процентом контейнера, в котором он находится, т.е. его родительским контейнером. Это НЕ процентная высота всего окна.

В каждом контейнере указывается процентная высота, поэтому результатом является высота 0. Дайте вашему внешнему div фиксированную высоту, и проблема будетбыть решенным.

Дополнительное редактирование:

Если вы хотите убедиться, что самый внешний div всегда простирается до нижней части окна, то это решение CSS с использованием абсолютного позиционирования: 

#OutermostDiv
 {
    position: absolute;
    top: 0;
    bottom: 0;
 }

Использование этого подхода все еще вызывает вычисленную высоту, даже если внешний div не имеет жестко заданной высоты.Это позволит вам использовать процентную высоту ваших внутренних элементов и поддерживать внешний элемент, который простирается сверху вниз в видимом окне.

0 голосов
/ 09 октября 2011

Вы также можете использовать display:table и display:table-cell для создания столбцов, если столкнулись с трудностями с float.Вот код CSS: 

#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}

и HTML-код: 

<div id="container">

<div id="sidebar">
<!-- Sidebar Content Here -->
</div>

<div id="content">
<!-- Content Here -->
</div>

</div>

Надеюсь, это решит вашу проблему.Но display:table не работает в некоторых старых браузерах.

0 голосов
/ 09 октября 2011

Вы должны будете установить свой контейнерный элемент на overflow:hidden;, а ваш контент div на overflow:scroll; (и, возможно, сделать overflow-x:hidden;, чтобы скрыть горизонтальную полосу прокрутки).Проблема в том, что если ваша боковая панель и контент будут иметь одинаковую высоту, вам понадобится две полосы прокрутки - одна для контента и одна для боковой панели.

Возможно, вы решите эту проблему, используядругой контейнерный элемент вокруг только боковой панели и содержимого и установки overflow: scrollbar; overflox-x:hidden; вместо него вместо боковой панели / содержимого.

...