Сделать разделение содержимого и верхние / нижние рабочие поля равными 100% общей высоты? - PullRequest
Новая
       0

Сделать разделение содержимого и верхние / нижние рабочие поля равными 100% общей высоты?

0 голосов
/ 06 мая 2011

Хорошо, у меня есть верхний и нижний колонтитулы с абсолютным позиционированием и высотой 144 пикселя.Div содержимого в средней области должен быть полной высотой области между ними.

Упрощено: 

<style>
  .marginals{
    position: absolute;
    height: 144px; 
    width: 100%; 
    left: 0;
  }
  #header{ top:    0px; }
  #footer{ bottom: 0px; }
</style>

<div id="header" class="marginals"></div>
<div id="content"> Content </div>
<div id="footer" class="marginals"></div>

Так что в основном я хочу, чтобы div составлял 100% - 288 пикселей.Сначала я подумал, что могу просто сделать деление 100% x 100% с 144 отступами сверху и снизу, а затем заполнить там содержимое div на 100%, но мое мышление куда-то заблудилось.

enter image description here

Вот пример, который я сделал, используя 20% высоты для «слоев хлеба».(Что я не могу сделать в этом проекте) Использовал 60% высоты для прокручивания «мясного слоя» и поместил его сверху: 20%;

Ответы [ 2 ]

1 голос
/ 06 мая 2011

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

, однако я думаю, что вы были правы в исходной публикации и в абсолютном позиционировании, вам не нужны проценты, вы можете использовать верхнюю и верхнююнижние координаты совместно, так что вы можете указать среднему div начинаться с 144px сверху и заканчивать 144px снизу ..

например

HTML: 

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

   <div class="wrap">
   Bulk content<br>bulk content<br>bulk content<br>bulk content<br>
   Bulk content<br>bulk content<br>bulk content<br>bulk content
   </div>

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

CSS: 

html, body {margin: 0; padding: 0; height: 100%; overflow: hidden;}

.wrap { 
  position: absolute;
  left: 0;
  top: 144px; /* = height of header including any borders or padding */
  bottom: 144px; /* = height of footer including any borders or padding */
  width: 100%;
  background: #fff;
  overflow: auto;
}

.header, .footer {
position: absolute;
width: 100%;
left: 0;
height: 140px;
background: #f00;
}

.header {
top: 0;
border-bottom: 4px solid #000;
}

.footer {
bottom: 0;
border-top: 4px solid #000;
}

Все основано на элементах html, body, высота которых установлена ​​на 100%

Пример: здесь

0 голосов
/ 06 мая 2011

Похоже, вы пытаетесь создать 3-х жидкостную структуру строк. Почему бы не попробовать что-то вроде этого:

Скрипка: http://jsfiddle.net/jCjsD/2/

HTML 

<body>

<div id="body_container">
    <div id="header">Some header content</div>
    <div id="content"><!-- Bulk content here !--></div>
</div>

<div id="footer">Footer</div>

</body>

CSS 

#header, #content, #footer {
    float: left;
    width: 100%;
}

#header {
    border-bottom: 1px solid #888;
    background: yellow;
}

#footer {
    border-top: 1px solid #888;
    background: yellow;
}

#content {
    clear: both;
    padding-bottom: 50px;
}

#footer {
    position: relative;
    margin-top: -50px;
    height: 50px;
    clear:both;
}   

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

#body_container {
    min-height: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...