Вопросы Теги

Высота CSS: Заполните свободное место. Никакие фиксированные высоты

Таким образом, у меня есть следующая структура

<div id="container">
  <div id="head"></div>
  <div id="body"></div>
  <div id="foot"></div>
</div>

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

Я хочу, чтобы мой контейнер указал фиксированный размер... или относительный размер, не имеет значения. Позволяет для пользы аргумента, говорят 300 пкс высотой. Также overflow: hidden

Я хочу, чтобы голова/нога расширилась для установки содержанию в себе, таким образом, height: auto достаточно.

Я хочу, чтобы тело расширилось для установки остающемуся пространству промежуточная голова и нога. Если содержание является слишком большим, то прокрутите (overflow: auto).

height: 100% на #body не работает, потому что затем это получает высоту 300 пкс как родитель и продвигает часть себя и нижнего колонтитула из родителя.

Наличие головы и ноги position: absolute не работает потому что путем вынимания их из потока документации, некоторого содержания #body скрыт. Для фиксации этого, мы можем использовать padding-top/нижнюю часть, но мы не можем установить a padding-top: xxpx/padding-bottom: xxpx на #body потому что мы не знаем необходимой высоты головы/нога следовательно, почему они height: auto.

Править:

Я пытался преобразовать контейнер/голову/тело/ногу в таблицу где #body height: 100%. Это работает отлично за исключением того, что #body не прокрутит, если содержание станет слишком большим, вместо этого вся таблица расширяется для показа всего содержания. Это не желаемое поведение, поскольку мне нужно #body прокручивать, нет #content или это - родитель.

Какие-либо предложения?

15
задан Dmitriy Likhten 2 July 2010 в 14:46
поделиться

2 ответа

Единственное решение, которое сразу приходит на ум, - это display: table-cell, хотя вы сталкиваетесь с проблемой отсутствия поддержки в ie6 и ie7.Может быть, предоставить правило для хороших браузеров и некоторый javascript для вычисления разницы в высоте, например?

Изменить:

Вот другой подход - использование jQuery для вычисления смещения. Имейте в виду, что это всего лишь быстрая и грязная попытка - ее нужно будет протестировать в браузере, и вам понадобится простая обработка ошибок и т. Д., Но это может быть отправной точкой.

Не уверен, что вам нужен javascript, но я не вижу, чтобы это было сделано в чистом CSS.

Я изменил идентификаторы на классы, чтобы вы могли иметь несколько блоков fixedHeight: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>

$(function() {   
   $(".fixedHeight").each(function() {
    var head = $(this).find(".head");
    var body = $(this).find(".body");
    var foot = $(this).find(".foot");   
    body.css("margin-top", head.height()).css("margin-bottom", foot.height());      
   });   
 });


</script>

<style>

.head {
    background-color: red;
    position: absolute;
    top: 0;
    width:100%;
}
.body {
    background-color: blue;
    color: white;
    overflow: auto;
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    margin:2.5em 0;
}
.foot {
    background-color: green;    
    position: absolute;
    bottom: 0;
    width:100%;
}
.container {
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%;
    position: absolute;
}


</style>

</head>

<body>

<div class="container fixedHeight">
  <div class="head">
    <h1>Header Content</h1>
  </div>
  <div class="body">
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
  </div>
  <div class="foot">
    <p>Footer Content</p>
  </div>
</div>


</body>
</html>
4
ответ дан 1 December 2019 в 05:07
поделиться

Хорошо, вот небольшое исследование, которое я провел, чтобы вроде как заставить это работать.

#head {
    background-color: red;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#body {
    background-color: blue;
    color: white;
    border: 0 none;
    overflow: auto;
    height: 100%;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}
#foot {
    background-color: green;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
#container {
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%;
    overflow: show;
    position: absolute;
}

Предполагается, что я могу вычислить размеры #head и #foot и установить общий размер для заполнения соответствующего местоположения #body . Это вытолкнет содержимое тела из области, которую занимает # голова / # ступня из-за их абсолютного позиционирования.Проблема здесь в том, что полоса прокрутки обрезается частично сверху / снизу, потому что смещается только контент, а полоса прокрутки - нет.

Для ширины это не проблема.

4
ответ дан 1 December 2019 в 05:07
поделиться