Липкий заголовок, липкий нижний колонтитул (переменная высота), средняя жидкость?

Я пытаюсь собрать простой 3-строчный макет в CSS. Необходимо:Липкий заголовок, липкий нижний колонтитул (переменная высота), средняя жидкость?

Основной контейнер DIV (ширина 100%, 100% высота), которая имеет ...
- Липкий заголовок (фиксированная высота 48px)
- среднюю секцию, которая заполняет все остальные пространство в промежутке между верхним и нижним колонтитулами
- липкого колонтитулом (начальная высотой 62px, но может измениться после загрузки страницы с помощью JavaScript)

Вот что у меня до сих пор:

HTML

<body> 
    <div id="container"> 
     <div id="headContainer"> 
      ... 
     </div> 
     <div id="bodyContainer"> 
      Stuff goes here 
     </div> 
     <div id="footContainer"> 
      ... 
     </div> 
    </div> 
</body>

CSS

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

body { 
    background-color:#2c3e50; 
} 

div#container { 
    height:100%; 
    width:100%; 
} 

div#headContainer { 
    background-color:#e74c3c; 
    height:48px; 
    width:100%; 
    z-index:1; 
} 

div#bodyContainer { 
    overflow:auto; 
    width:100%; 
    top:48px; 
    position:absolute; 
    background-color:#FFFFFF; 
} 

div#footContainer { 
    background-color:#c0392b; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    padding:11px 18px; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; /* Firefox */ 
    -webkit-box-sizing:border-box; /* Safari */ 
}

http://jsfiddle.net/MsKaj/2/

Я изо всех сил работать, как я получаю 'bodyContainer', чтобы заполнить доступное пространство между верхним и нижним колонтитулом. Если нижний колонтитул был фиксированным, это было бы намного проще!

Любые советы?

источник

2013-10-07 Mike

вы хотите липкий колонтитул в том смысле, что он будет оставаться в нижней части экрана, а не прокручивать со страницей ли? – Coop

Да. Все содержимое будет находиться внутри bodyContainer, который должен иметь возможность прокрутки. Верхний и нижний колонтитулы должны оставаться в верхней и нижней части страницы соответственно. – Mike

@Coop У меня есть эта проблема !! Как это можно сделать так, чтобы оно перемещалось со свитком? Спасибо – equisde

Все другие решения здесь устарели и прибегают к JavaScript или не поддерживают нижний колонтитул переменной высоты.

С появлением CSS flex model решение проблемы с липким нижним колонтитулом переменной высоты становится очень простым: в то время как в основном известно для размещения контента в горизонтальном направлении, Flexbox действительно работает так же, как и для задач вертикальной компоновки. Все, что вам нужно сделать, это обернуть вертикальные секции в гибком контейнере и выбрать, какие из них вы хотите расширить. Они автоматически займут все свободное место в контейнере.

Обратите внимание, насколько проста разметка и CSS. Никаких настольных хаков или чего-либо еще.

Модель flex - supported by all major browsers, а также, предположительно, IE11 +, хотя мой IE не отображает этот фрагмент правильно.

html, body { 
 
    height: 100%; 
 
} 
 

 
#headContainer { 
 
    background: yellow; 
 
    height: 100px; /* can be variable as well */ 
 
} 
 

 
#wrapper { 
 
    display: flex; /* use the flex model */ 
 
    min-height: 100%; 
 
    flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ 
 
} 
 

 
#bodyContainer { 
 
    flex: 1; 
 
    border: 1px solid orange; 
 
} 
 

 
#footContainer { 
 
    background: lime; 
 
}

<div id="wrapper"> 
 
    <div id="headContainer">Title</div> 
 
    <div id="bodyContainer">Stuff goes here</div> 
 
    <div id="footContainer"> 
 
    Footer<br/> 
 
    of<br/> 
 
    variable<br/> 
 
    height<br/> 
 
    </div> 
 
</div>

источник

2014-10-25 00:22:04

-2

Put:

height: 100%;

на ДИВ # bodyContainer

Кроме того, рассмотреть вопрос о применении положения: фиксированный; чтобы верхняя и нижние колонтитулы и крепление их к верхней части экрана и в нижней части экрана, соответственно ...

источник

2013-10-07 08:58:56

Спасибо Pat. Добавление высоты 100% к телу Контейнер подталкивает его под нижний колонтитул из-за верхнего смещения, которое я дал ему, чтобы он находился под заголовком. Теперь я буду возиться с фиксированным позиционированием. – Mike

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

Нижний колонтитул динамический по высоте. Он может меняться после загрузки страницы через jQuery. Когда он становится выше, мне нужно, чтобы он раздавил тело. – Mike

-2

Вы можете сделать это следующим образом (с фиксированными колонтитулами)

HTML:

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

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
.header, .footer { 
    position: fixed; 
    width: 100%; 
    height: 48px; 
    left: 0; 
    background: lightgreen; 
} 
.header { 
    top: 0; 
} 
.footer { 
    height: 62px; 
    bottom: 0px; 
} 
.content { 
    min-height: 100%; 
    background: lightblue; 
    padding: 48px 0 62px 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

И DEMO.

источник

2013-10-07 09:11:09 LinkinTED

Спасибо! В этом примере мы предполагаем, что нижний колонтитул имеет фиксированный размер, которого нет. Мне нужен «content» div, чтобы использовать все свободное пространство между верхним и нижним колонтитулами, независимо от того, какой размер нижнего колонтитула может оказаться. – Mike

Вы используете JS для изменения содержимого, не можете ли вы изменить размер нижнего колонтитула и прописку с помощью той же функции? – LinkinTED

Я мог бы сделать. Вероятно, это маршрут, который я возьму сейчас, но я надеялся на решение на основе CSS! – Mike

Липкий заголовок, липкий нижний колонтитул (переменная высота), средняя жидкость?

ответ

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