CSS-макет с фиксированным верхним и нижним, переменная высота среднего

+-------------------+
|    Top (fixed)    |
+-------------------+
|                   |
|                   |
|   Middle (fill)   |
|                   |
|                   |
+-------------------+
|   Bottom (fixed)  |
+-------------------+

верхняя и нижняя - фиксированные div. Они расположены сверху и снизу окна браузера. Я хочу, чтобы часть средняя заполнила остальную часть окна между верхними и нижними div.

Если это содержимое больше, чем его высота, я могу использовать полосы прокрутки. Но его размер не должен превышать окна.

Мои CSS и HTML:

html, body, #main
{
  height: 100%;
}
#content
{
  background: #F63;
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -100px;
}
#footer
{
  position: fixed;
  display: block;
  height: 100px;
  background: #abcdef;
  width: 100%;
}

<div id="main">
  <div id="content">xyz</div>
  <div id="footer">abc</div>
</div>

Ответ 1

Поместите средний div, используя абсолютное позиционирование без указания высоты. Это не намного проще:

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#content {
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}

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

Ответ 2

HTML

<div id="main">
<div id="header"> Header Content</div>    
<div id="content">
    <ul><li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>           
        </ul>
</div>
<div id="footer">I am Footer
</div>

css

      body { margin: 0;}
#main{
   position: absolute;
   width: 100%;
   top: 0;
   bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow:scroll;               
}
#footer
{
      position: absolute;
      height: 41px;
      bottom: 0;
      left: 0;
      right: 0;
      text-align:center;
      display:block;
      background: blue;
}

li{
    text-decoration: none;
    display: block;
    height: 20px;
    width: 100%;
    padding: 20px;

}

Демо JSFIDDLE

Ответ 3

Я думаю, что это то, чего вы хотите...

JSBin: http://jsbin.com/ebilag/1/

CSS:

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

.top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    background: yellow;
}

.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: grey;
}

.middle {
    padding-top: 100px;
    padding-bottom: 100px
}

HTML:

<div class="container">

    <div class="top">Top</div>

    <div class="middle">Middle</div>

    <div class="bottom">Bottom</div>

</div>

Ответ 4

Если вы знаете высоту заголовка и нижнего колонтитула...

тогда вы можете сделать это легко с помощью свойства box-sizing.

Так же:

FIDDLE1 FIDDLE2

.container
{
    height: 100%;
    background: pink;
    margin: -64px 0;
    padding: 64px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    overflow:auto;
    height:100%;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 64px;
    background: gray;
    position: relative;
    z-index:1;
}

Ответ 5

Решение с top and bottom padding в порядке, но я бы предложил другой подход, когда основной кадр проектируется как table. Это более гибко, и вы можете скрыть голову или ногу, не меняя css.

STYLUS (CSS):

html,
body
  height: 100%
.container
  display: table
  height: 100%
.head,
.foot,
.content
  display: table-row
  box-sizing: border-box
.head,
.foot
  height: 70px
  background: #ff0000
.content
  overflow: auto
.scroll
  height: 100%
  overflow: auto
  box-sizing: border-box

HTML:

<div class="container">
  <div class="head">...</div>
  <div class="content">
    <div class="scroll">...</div>
  </div>
  <div class="foot">...</div>
</div>

Ответ 6

Если вы не знаете размеры верхнего или нижнего колонтитула, и вы можете использовать CSS3, я бы предложил использовать макет flexbox.

Пример ниже (или отметьте fiddle)

HTML:

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

CSS

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 400px;
}

.header {
  flex-grow: 0;
  background-color: red;
}
.content {
  flex-grow: 1;
  background-color: green;
}
.footer {
  flex-grow: 0;
  background-color: blue;
}

Ответ 7

HTML:

<div id="main">
    <div id="header">I am Header
    </div>
    <div id="content">I am the Content
    </div>
    <div id="footer">I am Footer
    </div>
</div>

CSS

#main{width:100%;height:100%;}
#header
{
    position:relative;
    text-align:center;
    display:block;
    background:#abcdef;
    height:40px;
    width:100%;
}
#content
{
    background: #F63;
    width:100%;
    text-align:center;
    height:auto;
    min-height:400px;
}
#footer
{
    position:relative;
    text-align:center;
    display:block;
    background:#abcdef;
    height:40px;
    width:100%;
}

DEMO

Ответ 8

Пожалуйста, попробуйте следующее:

HTML

<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>

CSS

html,body{
  marign: 0;
  padding: 0;
  height: 100%;
}
#header {
  height: 100px;
  position: fixed;
  top: 0;
  left:0;
  right: 0;
  background: orange;
}
#footer {
  height: 100px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: green;
}
#content {
  padding-top: 100px;
  padding-bottom: 100px;
  height: -webkit-calc(100% - 200px);
  height: -moz-calc(100% - 200px);
  height: -ms-calc(100% - 200px);
  height; -o-calc(100% - 200px);
  height: calc(100% - 200px);
  background: #ccc;
}

просмотрите демонстрацию .

Ответ 9

По-моему, вы должны использовать js/jquery, чтобы изменить высоту #content во время загрузки страницы. Это должно быть что-то вроде этого (я не тестировал код ниже, поэтому измените его, как вам нужно):

$().ready(function(){
  var fullHeight= function(){
  var h=$(window).height()-100; //100 is a footer height
  $('#content').css('min-height',h+'px');
};

$(window).resize(fullHeight);
fullHeight();
});