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

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

Ищете макет, чтобы иметь 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>

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

Любые идеи?

источник

2010-07-12 Nick Spacek

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

.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 подразумевает их).

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

См. Демонстрационную версию here.

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

источник

2014-01-27 11:32:18 Javarome

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

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, которое инкапсулирует заголовок и тело, но не нижний колонтитул.

источник

2010-07-12 15:46:52 bpeterson76

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

Я знаю, что это устарело, но я подумал, что я бы предложил другое предложение. Моя мысль о браузерах - это использовать браузер с поддержкой 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 - также ... это будет прокручивать заголовок и контент, но не нижний колонтитул.вы всегда можете использовать тот же подход с заголовком, который я сделал с нижним колонтитулом, но добавляем прописку в верхнюю часть раздела, которая соответствует высоте заголовка]

источник

2013-10-11 22:01:14 Steve

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

ответ

Смежные вопросы