CSS Fluid Layout? - PullRequest
Новая
       20

CSS Fluid Layout?

0 голосов
/ 17 января 2010

У меня есть быстрый вопрос о том, как настроить мой основной макет жидкости. У меня один верхний 40-пиксельный и 100-миллиметровый верхний колонтитул сверху, это выглядит великолепно.

Тогда у меня есть #left и #right div, каждый с плавающей точкой соответственно. Это выглядит круто. Они оба имеют высоту 100%, что прекрасно работает, но проблема в том, что страница затем прокручивается на 40px вниз, потому что есть 40px из строки заголовка ... если я использую текучую разметку для заголовка, а затем окно содержимого, это будет выглядеть ужасно на крошечном или очень большом разрешении.

Есть идеи?

Вот мой CSS 

body
{
    background: #ebebeb;
    margin: 0;
    padding: 0;
    min-width: 750px;
    max-width: 1500px;
}
#wrap
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#header
{
    background: #414141;
    height: 40px;
    width: 100%;
}
#sidebar
{
    width: 30%;
    background: #ebebeb;
    height: 100%;
    float: left;
}
#rightcontent
{
    width: 70%;
    background: #fff;
    height: 100%;
    float: right;
}
#footer
{
    width: 100%;
    background: #414141;
    height: 40px;
    clear: both;
}

А вот моя HTML-страница: 

<body>
<div id="wrap">
    <div id="header">
        head
    </div>
    <div id="sidebar">
        side
    </div>
    <div id="rightcontent">
        right
    </div>
    <div id="footer">
        footer
    </div>
</div>
</body>

Помогает ли это:)

1 Ответ

1 голос
/ 17 января 2010

height: 100%; - сложная вещь для веб-страниц, о которой вы, несомненно, прекрасно понимаете. Глядя на ваш код в Firefox 3.5.7, столбцы #sidebar и #rightcontent имеют только высоту около em - этого достаточно, чтобы вместить текст, который вы в них вставили, а не всю длину страницы. надеясь на. Столбцы пытаются вычислить процентную высоту от явной высоты их родителя, но #wrap также имеет высоту на основе%, что приводит к сбою (по крайней мере, в моем Firefox).

Теперь, как вы описали (правильная высота столбцов, за исключением дополнительной прокрутки в 40px), похоже, что происходит то, что любой используемый вами браузер передает полную высоту #wrap как 100 % от это родитель, то есть <body>. Поэтому, естественно, когда ваши столбцы имеют размер <body>, который также включает высоту верхнего и нижнего колонтитулов, столбцы слишком высокие.

Уловка, которую я использовал пару раз, чтобы добиться полной длины страницы для отображения столбцов, которые масштабируются соответствующим образом для любого измерения страницы, чтобы прикрепить тег position: fixed; bottom: 0px; <div> внизу моей страницы с достаточной разметкой внутри него, чтобы имитировать структуру и соответствующие CSS столбцов.

Вот что я сделал с вашей страницей, чтобы получить этот эффект: 

<!--Add this to your HTML-->
<div id='columnfooter'>
 <div id='sidecont'></div>
    <div id='rightcont'></div>
</div>



/* And modify your CSS like this */
#sidebar, div#sidecont {
    width: 30%;
    background: #ebebeb;
    float: left;
}

#rightcontent, div#rightcont {
    width: 70%;
    background: #fff;
    float: right;
}

div#rightcont, div#sidecont {
 height:100%;
}

#footer {
    width: 100%;
    background: #414141;
    height: 40px;
    position: relative;
    bottom: 0px;
}

div#columnfooter {
 position: fixed;
 z-index: -25;
 bottom: 40px;
 height: 100%;
 background: #ebebeb;
 width: 100%;
}

Да, использование HTML-кода для формирования пустых фоновых столбцов таким способом создает определенную смесь семантической и стилистической разметки - с технической точки зрения нет. Но CSS явно абстрагирован от HTML, и с этим кодом у меня есть полностраничные столбцы, #footer внизу (даже если в любой столбец над ним добавлено больше страницы контента), и он ведет себя одинаково в последние версии Firefox, Safari, Opera, Chrome и IE8 в любом разрешении (протестировано до 800x600).

Надеюсь, это поможет!

...