Как сделать контент div растягиваться из заголовка div в нижний колонтитул?

Я использую CSS-код Bootstrap для «липкого нижнего колонтитула», чтобы мой нижний колонтитул появился внизу моей страницы. Как я могу сделать свой контент (синий div в примере) растянуть до конца до нижнего колонтитула (желтый div в примере)? Я попытался сделать .content 100% высоты, но это не влияет.Как сделать контент div растягиваться из заголовка div в нижний колонтитул?

Мой CSS

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 
.content { 
    height: 100%; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
}

Мой HTML

<body> 
<div class="header">This is my header</div> 
<div class="content">This is my content</div> 
<div class="footer">This is my footer</div> 
</body>

Пример:http://jsfiddle.net/pjktqnmo/1/

Ref:http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css

Обновление: Мой заголовок содержит мое название страницы, поэтому высота заголовка варьируется от страницы к странице.

источник

2014-10-25 henrywright

здесь решение с не используется не position свойство.

см ниже фрагмент кода:

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    color:grey; 
 
} 
 
.header { 
 
    background-color:red; 
 
} 
 
.content { 
 
    min-height: 100%; 
 
    margin-bottom: -60px; /* equal to footer height */ 
 
    background-color:blue 
 
} 
 
.content:after { 
 
    content:""; 
 
    display: block; 
 
} 
 
.footer, .content:after { 
 
    height: 60px; 
 
} 
 
.footer { 
 
    background: yellow; 
 
}

<body> 
 
    <div class="header">This is my header</div> 
 
    <div class="content">This is my content</div> 
 
    <div class="footer">This is my footer</div> 
 
</body>

Больше информации здесь: sticky footer

ОБНОВЛЕНО ОТВЕТНа основе обсуждения с ФП, где ФП говорится, что не хотите иметь вертикальный ScrollBar, поэтому вот решение bel ow:

Что я сделал? Сделайте свой div .header ребенком div .content, с 0 изменениями в CSS относительно моего первого фрагмента выше.

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    color:grey; 
 
} 
 
.header { 
 
    background-color:red; 
 
} 
 
.content { 
 
    min-height: 100%; 
 
    margin-bottom: -60px; /* equal to footer height */ 
 
    background-color:blue 
 
} 
 
.content:after { 
 
    content:""; 
 
    display: block; 
 
} 
 
.footer, .content:after { 
 
    height: 60px; 
 
} 
 
.footer { 
 
    background: yellow; 
 
}

<div class="content"> 
 
    <div class="header">This is my header</div> 
 
    This is my content 
 
</div> 
 
<div class="footer">This is my footer</div>

источник

2014-10-25 00:40:53 dippas

Аккуратное решение , но это приводит к появлению вертикальной полосы прокрутки? – henrywright

Я покажу в конце концов. – dippas

Да, я вас понимаю, но это показывает полосу прокрутки v даже с едва ли содержанием. – henrywright

Если заголовок 30px высокий, и ваш колонтитул 60px высокий, это должно работать для содержания:

position: absolute; 
left: 0; 
right: 0; 
top: 31px; 
bottom: 61px;

источник

2014-10-25 00:30:04

Иногда мой заголовок может быть больше, чем 30px, в зависимости от названия страницы. Я уточню свой вопрос. – henrywright

Установите высоту примерно так:

html, body { 
    height: 100%; 
} 
.content { 
    min-height: 100%; 
}

http://jsfiddle.net/pjktqnmo/6/

источник

2014-10-25 00:33:01 Kishan

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

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

Вызов этого на странице загрузки и когда пользователь изменяет размер окна:

$('.content').css('height',$(document).height() - ($('.header').height() + $('.footer').height() + `MARGIN TOP OR PADDING`) - $('.contact').height());

источник

2014-10-25 00:34:07 gr3g

Любая идея, как сделать эту работу без JavaScript? к сожалению, мне нужно обслуживать 0,000001%, которые отключили его. – henrywright

Не уверен, что вам нужно сохранить 'position relative'on HTML-элемент, но здесь ... http://jsfiddle.net/pjktqnmo/1/ – gr3g

Вы можете попробовать использовать таблицу вместо в качестве контейнера для вашей страницы.Убедитесь, что ваши <html>, <body> и <table> элементы имеют ширину и высоту на 100%.

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

Наконец, удалите расстояние между ячейками таблицы

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    /* Margin bottom by footer height */ 
 
    margin-bottom: 60px; 
 
} 
 
.header { 
 
    background-color: green; 
 
} 
 
.content { 
 
    height: 100%; 
 
    background-color: cyan; 
 
} 
 
.footer { 
 
    width: 100%; 
 
    /* Set the fixed height of the footer here */ 
 
    height: 60px; 
 
    background-color: #f5f5f5; 
 
} 
 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 
table { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-spacing: 0px; 
 
} 
 
td { 
 
    padding: 0px; 
 
} 
 
.contentCell { 
 
    height: 100%; 
 
}

<body> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <div class="header">This is my header</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="contentCell"> 
 
     <td> 
 
     <div class="content">This is my content</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="footer">This is my footer</div> 
 
     </td> 
 
    <tr> 
 
    </table> 
 
</body>

источник

2014-10-25 01:11:12 Lochemage

также имеет v-прокрутку и OP только хочет, когда это необходимо. – dippas

исправлено, тело имело запас на нем. – Lochemage

Мне интересно, столы нахмурились при использовании для макета? или это было в прошлом? – henrywright

Как сделать контент div растягиваться из заголовка div в нижний колонтитул?

ответ

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