3-рядная компоновка, фиксированная высота верхнего и нижнего колонтитула и содержание жидкости, но прокрутка - PullRequest
Новая
       9

3-рядная компоновка, фиксированная высота верхнего и нижнего колонтитула и содержание жидкости, но прокрутка

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

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

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

Возможно без JavaScript? Мы попробовали (упрощенный пример): 

<html style="height: 100%">
<body style="height: 100%">
<section style="height: 100%; display: table;">
  <header style="display: table-row; height: 200px;">
    Header
  </header>
  <section style="display: table-row; height: 100%; overflow-y: auto;">
    Content
  </section>
  <footer style="display: table-row; height: 200px;">
  </footer>
</section>
</body>
</html>

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

Есть идеи?

Ответы [ 3 ]

2 голосов
/ 27 января 2014

Прежде всего, если вам нужны фиксированные верхний и нижний колонтитулы, вам нужна абсолютная (или фиксированная) ссылка, чтобы придерживаться: 

.container {   
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Тогда самый простой и современный способ выразить ваши ограничения сверху / растяжения / дна - это использовать дисплей flex в направлении сверху вниз вдоль всей высоты этого абсолютного ориентира: 

.content {
   display: flex;
   flex-direction: column;
   height: 100%;
}

Наконец, определите содержимое флекса и ограничения на его выравнивание: 

header {
   align-content: flex-start;
}
.fluid-and-scrollable {
    flex: 1;
    overflow-y: scroll;
}
footer {   
   align-content: flex-end;
}

(обратите внимание, что flex-start и flex-end на самом деле не требуются, поскольку естественный порядок элементов в HTML подразумевает их).

Конечно, в зависимости от требований поддержки вашего браузера вам придется иметь дело с собственным / старым синтаксисом Flexible Box Layout.

См. Демонстрацию здесь .

Редактировать : Если вы хотите, чтобы такой макет применялся ко всему окну просмотра, я бы не рекомендовал это решение, поскольку iOS не будет сокращать панели браузера, если вы не прокручиваете на body. Вместо этого я бы порекомендовал более простое, старомодное решение, которое помещает фиксированный верхний и нижний колонтитулы поверх body (проверьте эту альтернативу на вашем мобильном Safari, чтобы проверить разницу).

1 голос
/ 12 октября 2013

Я знаю, что это старо, но я подумал, что я бы предложил другое предложение. Я думаю, что браузеры должны использовать браузер с поддержкой HTML5. Это определенно будет зависеть от того, для чего предназначался сайт, но вот настройку, которую я использую (даст вам эту прокрутку тоже без вызова):

Установите для Doctype значение HTML (не добавляйте все дополнительные элементы), чтобы классифицировать его как сайт HTML5.

CSS: 

* {
    margin: 0;
    padding: 0;
    line-height: 100%;
}

body {
    font: 1em Verdana, Geneva, sans-serif;
}

header {
    width: 100%;
    height: 150px;
    background-color: gray;
}

section {
    min-height: 100%;
    padding-bottom: 100px;
}

footer {
    width: 100%;
    height: 100px;
    background-color: #E0E0E0;
    position: fixed;
    bottom: 0;
    left: 0;        
}

HTML: 

<body>

<header>
    header
</header>

<section>
        <strong>repeat to fill the page when you test overflow</strong>
            content. test the content. test the content. test the content. test the content. test the content. test the content.
</section>

<footer>
    footer
</footer>

</body>

Если вам когда-либо понадобится проверить область содержимого, просто добавьте атрибут границы к * цветом, похожим на зеленый, - отличный способ увидеть, куда движутся ваши области, когда вы его меняете.

Если кто-то не согласен, просто дайте мне знать, что с этим не так. Я использую это для запуска и изменения по мере необходимости.

[p.s. протестировано с IE, Chrome и Mozilla - также ... это прокручивает заголовок и контент, но не нижний колонтитул. Вы всегда можете использовать тот же подход с верхним колонтитулом, который я использовал с нижним колонтитулом, но добавьте отступ в верхнюю часть раздела, соответствующий высоте верхнего колонтитула]

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

Даже если вам нужно только поддерживать более новые браузеры, я думаю, что есть решение, которое может сделать все браузеры (или, по крайней мере, большинство).Подходите к нему как к решению «толчка нижнего колонтитула».Например:

CSS: 

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

HTML: 

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="article"></div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Итак, теперь верхний и нижний колонтитулы имеют заданный размер, средний (называется статьей)будет заполнять экран, если нет больше контента, в этом случае он будет растягиваться.Если вы изменяете, обратите внимание на положение div-обертки, который инкапсулирует заголовок и тело, но не нижний колонтитул.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...