Плавный вертикальный макет

ProgramBox

Плавный вертикальный макет

Post author:admin
Запись опубликована:27 мая, 2023
Post category:Вопросы по программированию

#css

Вопрос:

Я просмотрел множество форумов и вопросов, однако не смог найти ничего, что касалось fluid vertical (не горизонтальной компоновки).

У меня есть разметка следующим образом:

 <div class="wrapper">
    <div class="header"></div>
    <div id="content"></div>
    <div class="footer"></div>
</div>

Мой CSS:

 html,body {margin: 0; padding: 0; height: 100%;}
.wrapper {width: 900px; margin: 0 auto; height:auto !important; height:100%; min-height:100%; position: relative;}
#content {padding-bottom: 60px; /* For the footer padding */ }
.footer { position: absolute; bottom: 15px; height: 45px;}

В этом случае у меня есть макет с фиксированной высотой заголовка и содержимого. Нижний колонтитул прилипает к низу.

Все это замечательно, но я хочу сделать плавный вертикальный макет, чтобы нижний колонтитул всегда располагался внизу (как сейчас), но высота заголовка и содержимого изменялась: 30 и 70% соответственно.

Как я могу этого добиться?

1. Я не совсем уверен, чего вы хотите достичь. Нижний колонтитул имеет фиксированную высоту, а заголовок / содержимое должны растягиваться, чтобы заполнить все остальное? (Сохраняя соотношение 30: 70)?

2. да, я хотел бы добиться именно того, что вы написали!

3. Это становится сложным, когда содержимое слишком сильно расширяется. Например, представьте, что высота окна просмотра равна 1045 пикселям. Нижний колонтитул тогда занимает 45 пикселей, верхний — 300 пикселей, а содержимое — 700 пикселей. Но предположим теперь, что заголовок содержит изображение высотой 600 пикселей, а содержимое — изображение высотой 200 пикселей? Какими тогда должны быть размеры? Вы отказываетесь от соотношения 30: 70, чтобы все оставалось на экране, или вы растягиваете заголовок до 600 пикселей, а содержимое — до 1400 пикселей? Или, может быть, вы оставляете их на уровне 300px / 700px и добавляете полосу прокрутки к заголовку? Или просто обрезать изображение заголовка?

Ответ №1:

Макет:

 <body>
<div id="container">
    <div id="header">
    </div>

    <div id="content">
        <div id="content-text">
        </div>
    </div>

    <div id="footer">
    </div>

</div>
</body>
</html>

CSS:

 html {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
}

#container {
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    margin-left: auto;
    margin-right:auto;
    overflow:hidden;
}

#header,
#footer {
    position:absolute;
    left:0;
    z-index:2;
    width:100%;
    overflow:hidden;
}

#header {
    top:0;
    height:30%;
}

#footer {
    bottom:0;
    height:1.6em;
}

#content {
    position:absolute;
    bottom:0;
    top:0;
    right:0;
    left:0;
    z-index:10;
    width: 100%;
    height:auto;
    margin-top:30%;
    margin-bottom:1.6em;
    overflow:hidden;
}

#content-text {
    position:relative;
    width:100%;
    height:100%;
    margin-left: auto;
    margin-right:auto;
    overflow:auto;
}

Я также рекомендую перед этим выполнить сброс CSS.

РЕДАКТИРОВАТЬ Извините, сначала я добавил фиксированный размер для заголовка, я исправил его, хотя, похоже, таким образом он немного глючит. Я все еще ищу лучший способ.

1. Разве это не придает заголовку фиксированный размер? Автор хотел, чтобы он занимал 30% страницы без нижнего колонтитула.

2. Да, я заметил, я меняю это, извините. Понедельник.

Ответ №2:

В подобных случаях я обычно говорю — к черту головную боль от CSS, давайте просто использовать старомодную таблицу вместо этого!

HTML:

 <table style="height: 100%">
    <tr>
        <td id="header"></td>
    </tr>
    <tr>
        <td id="contents"></td>
    </tr>
    <tr>
        <td id="footer"></td>
    </tr>
</table>

CSS:

 body, html
{
    height: 100%;
}
#header
{
    background-color: red;
    height: 30% 
}
#contents
{
    background-color: lime;
    height: 70% 
}
#footer
{
    background-color: blue;
    height: 45px;
}

Это может быть не «стильно», но оно выполняет свою работу и будет на порядок проще, чем необходимая паутина CSS. Кроме того, если содержимое чего-либо становится слишком большим, оно (каким-то образом, в зависимости от браузера) изменяет размер, чтобы все оставалось видимым, при необходимости добавляя полосу прокрутки к основному тексту.

1. Спасибо за ответ! Однако я использовал CSS, основанный на вашем табличном принципе: я использовал display:table и display:table-cell . Это помогло, так что спасибо за подсказку.

2. Никаких проблем, хотя этот подход может дать сбой в старых браузерах (скажем, IE6). Так что будьте осторожны. (Кроме того, я не вижу смысла маскировать таблицу под другими именами тегов, но это ваш выбор)

3. @Vilx — «Я не вижу смысла маскировать таблицу под другими именами тегов», потому что ваша разметка используется неправильно? Потому что вы не должны использовать таблицы для структуры контента. Ваш ответ — «взлом» вместо правильного семантического решения.

4. @Axel — В этом случае нет «правильного семантического решения». (Хорошо, возможно, в последних версиях браузеров это можно сделать без таблиц, я не знаю, и у меня нет времени проверять сейчас).

5. Да, есть. Вместо этого вы предоставляете быстрое 2-минутное решение, которое дает понять человеку, задающему вопрос, что можно срезать углы. То, о чем он просит, вполне возможно без использования табличной разметки для структуры макета..

Ответ №3:

Для нижнего колонтитула вы можете попробовать это

 .footer { 
position: fixed; 
bottom: 0; 
height: 45px;
}

Ответ №4:

Поскольку у меня была та же проблема, вам, вероятно, нужен так называемый «липкий нижний колонтитул».

Посмотрите, например, на http://ryanfait.com/sticky-footer /, он работает во всех браузерах. Здесь также есть хорошая статья, описывающая, как этого добиться: http://ryanfait.com/resources/footer-stick-to-bottom-of-page /

1. это всего лишь иллюзия, если вы действительно хотите макет с фиксированным исправлением, это не сработает

2. это простое решение, возможно, есть решения получше, но реальная проблема заключается в отсутствии поддержки в HTML / CSS для современных макетов (например, абсолютное центрирование с элементами жидкого размера требует также некоторых хитростей с JS)

Ответ №5:

Демо-страница — исправлена плавный исправлен

Я сделал быструю демонстрацию макета, который является очень распространенным:

HTML

 <body>
    <header>Header</header>
    <section>Content</section>
    <footer>Footer</footer>
</body>

CSS

 html, body{ height:100%; }
/* you can use "border-spacing" on the body as well */
body{ display:table; width:100%; padding:0; margin:0; }
body > *{ display:table-row; }

header{ height:100px; }
section{ height:100%; }
footer{ height:50px; }

Обратите внимание, что это будет работать только в современных браузерах