it-swarm.com.de

CSS-Layout mit fester Ober- und Unterseite, variable Höhe in der Mitte

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

Die oben und nten sind feste Divs. Sie befinden sich oben und unten im Browserfenster. Ich möchte, dass der mittlere Teil den Rest des Fensters zwischen oberen und unteren Divs ausfüllt.

Wenn der Inhalt größer als die Höhe ist, kann ich Bildlaufleisten verwenden. Seine Größe sollte jedoch das Fenster nicht überschreiten.

Mein CSS und 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>

Daraus ergibt sich, dass die Fußzeile im unteren Bereich angezeigt wird, der Bereich Inhalt jedoch weiterhin das gesamte Fenster ausfüllt, das die Höhe [Fenster-Fußzeile] haben sollte.

35
Ruchan

Positionieren Sie die mittlere Unterteilung mit absoluter Positionierung ohne Angabe der Höhe. Einfacher geht es nicht:

#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>

Verwenden Sie die Option "Ganze Seite", um das Snippet korrekt anzuzeigen.

57
Salman A

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 Demo

6
ANonmous Change

Ich denke das ist was du willst ...

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>
3
Pavel

Wenn Sie die Höhe der Kopf- und Fußzeile kennen ...

dann kannst du das einfach mit dem box-sizing Eigentum.

Wie so:

FIDDLE1FIDDLE2

.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;
}
2
Danield

Wenn Sie die Kopf- oder Fußzeilengröße nicht kennen und CSS3 verwenden können, würde ich empfehlen, flexbox layouting zu verwenden.

Beispiel unten (oder check 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;
}
2
teo

Die Lösung mit top and bottom padding ist in Ordnung, aber ich würde einen anderen Ansatz vorschlagen, bei dem der Hauptrahmen als table entworfen ist. Dies ist flexibler und Sie können Kopf oder Fuß verstecken, ohne das CSS zu ändern.

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>
1
xpepermint

Bitte versuchen Sie dies:

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;
}

bitte schauen Sie sich die Demo .

0
Airen

Meiner Meinung nach sollten Sie js/jquery verwenden, um die #content-Höhe beim Laden der Seite zu ändern. Dies sollte ungefähr so ​​aussehen (ich habe den Code unten nicht getestet, ändern Sie ihn also nach Bedarf):

$().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();
});
0
Piotr Giniewski

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

0
Aravind30790