сделать содержание div заполнить оставшуюся высоту

У меня есть макет страницы, в котором у меня есть заголовок fixed, который может иметь любую высоту и нижний колонтитул, расположенный в нижней части страницы. Я ищу решение css, так что содержимое div заполняет оставшееся пространство (по вертикали). В jsfiddle ниже я пытался это сделать, но, как вы видите, содержимое находится за нижним колонтитулом.сделать содержание div заполнить оставшуюся высоту

HTML:

<main> 
    <header> 
     <ol> 
      <li>bar</li> 
      <li>foo</li> 
     </ol> 
    </header> 
    <section> 
     <div class="content"><div> 
    </section> 
    <footer></footer> 
</main>

CSS:

header { 
    background-color: #abc; 
    z-index: 1000; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
} 

html, body, main, section { 
    height: 100%; 
    display: block; 
} 

.content{ 
    background-color: #000; 
    height: 100%; 
} 

footer { 
    background-color: #def; 
    bottom: 0; 
    display: block; 
    height: 54px; 
    position: absolute; 
    width: 100%;

}

Возможно ли это с чистым CSS (3)?

jsfiddle

источник

2014-09-01 Jeanluca Scaljeri

Является ли ваш макет реагировать? – neilhem

да, макет на самом деле жидкий –

Попробуйте позиционирование content быть прямо над сноской

bottom: <footer-height>; 
position: absolute;

источник

2014-09-01 08:49:00 JNF

, если я это сделаю, я не получаю div, который заполняет все пространство (даже не с высотой, установленной на 100%) –

Это немного уродливыми решениями, но если вы сделаете маржинальную-верхнюю часть DIV контента в -54px и добавьте div внутри него с padding-top: 54px, он работает так, как ожидалось.

HTML:

<div class="content"><div class="contentwrapper"></div><div>

CSS:

.contentwrapper { 
    padding-top:54px; 
} 
.content{ 
    background-color: #000; 
    height: 100%; 
    margin-top:-54px; 
}

Fiddle: http://jsfiddle.net/dohqn8m4/1/

источник

2014-09-01 08:52:55 JohannesB

Я думаю, что ваше решение устраняет проблему нижнего колонтитула, но теперь содержимое попадает за заголовок –

То же самое, что и раньше, в вашем скрипте содержимое также находилось за заголовком – JohannesB

Если у вас нет фиксированной высоты для вашего заголовка, это также не может быть реально разрешено, просто используя css – JohannesB

Здесь diffrent подход:

HTML:

<header> 
    <ol> 
     <li>bar</li> 
     <li>foo</li> 
    </ol> 
</header> 
<main> 
    <section> 
     <div class="content"></div> 
    </section> 

    <div class="push"></div> 
</main> 
<footer></footer>

CSS:

html, body { 
     height: 100%; 
     min-height: 100%; 
     margin: 0; 
     padding: 0; 
     border: 0; 
    } 

    header { 
     background-color: #abc; 
     z-index: 1000; 
     position: fixed; 
     top: 0; 
     right: 0; 
     left: 0; 
    } 

    main { 
     min-height: 100%; 
     height: auto !important; 
     margin-bottom: -54px; 
    } 

    main > section{ 
     padding-top: 72px; 
    } 

    .content { 
     background-color: #000; 
    } 

    .push { 
     height: 54px; 
    } 

    footer { 
     background-color: #def; 
     height: 54px; 
    }

Теперь футер всегда на дне aslong содержание не заполняет страницу отверстия. В этом случае элемент «push» предоставляет достаточно места для отказа в перекрытии нижнего колонтитула и содержимого.

Ваш контент div ist теперь находится под нижним колонтитулом через прокладку. Высота на самом деле равна 0 из-за недостающего содержимого. В моем подходе содержимое div всегда вставляет содержимое.

Имейте в виду, что a) для гибкой цели, которую вы должны были знать о высоте заголовка и отрегулировать прокладку секции, используя медиа-запросы b) то же самое для нижнего колонтитула. Отрегулируйте высоту толкающего элемента и отрегулируйте его значение.

jsFiddle

источник

2014-09-01 10:15:53

Я сделал липкий колонтитул с помощью этого tutorial. Я думаю, что это легко и удобно использовать.

CSS КОД

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
}

HTML КОД

<!DOCTYPE html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html>

DEMO URL

источник

2014-09-01 18:39:58

сделать содержание div заполнить оставшуюся высоту

ответ

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