CSS header, Menü, Inhalt und Fußzeile position

Habe ich die folgende Seite:

<body>
<div id="wrap">

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

    <div class="undef">
        <div class="top_h"></div>

    <div id="menu">
               <ul>
               <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
        </ul>

    <div class="bottom_h"></div>

 </div>

    <div id="page_content">
        <p>         
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis nibh id odio laoreet, nec bibendum erat auctor. Vivamus imperdiet nisi eget nisl blandit lobortis. Nam vestibulum scelerisque nisi, sit amet fermentum metus dapibus ut. Etiam et volutpat eros, sed porttitor elit. Nulla bibendum ornare metus, in venenatis lectus rhoncus sit amet. In hac habitasse platea dictumst. Fusce nibh nulla, rhoncus eget laoreet a, aliquam ac libero. Curabitur tristique porttitor congue. Integer lacinia congue orci quis vestibulum.
        Nulla risus nisi, sodales id augue in, laoreet feugiat orci. Vestibulum fermentum sapien est, eget pretium eros adipiscing vel. Nulla malesuada ornare congue. Suspendisse eget enim et dolor porttitor scelerisque ut eu augue. Duis vitae risus quis est rutrum consectetur pharetra ullamcorper lacus. Suspendisse vestibulum auctor mi, in laoreet libero pellentesque ut. Donec a elit at ligula viverra dictum vel feugiat elit.
        </p>


    <div class="bottom_h"></div>
    </div>

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

</div>



</body>
</html>

Und die folgenden css:

* {
    margin: 0px;
    padding: 0px;
    border: none; 
}

html, body {
    background-color: yellow;
    height: 100%;
}

#header {
    position: absolute;
    height: 100px;
    width: 100%;
    background: #335599;
    border-bottom-color: #ffffff;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    z-index: 100;
}

#footer {
    height: 60px;
    width: 100%;
    background-color: #dd1155;
    border-top-color: #ffffff;
    border-top-style: solid;
    border-top-width: 1px;
        z-index: 1000;
}

#wrap {
    position: relative;
    height: 100%;
}

#wrap_content {

}

.undef {
    width: 100%;
}

.top_h {
    height: 100px;
}

.bottom_h {
    height: 60px;
}
#page_content {
    padding-left: 150px;
    position: relative;
    color: #FFFFFF;
    background-color: #000000;
}

#menu {
    height: 100%;
    position: relative;
    float: left;
    background-color: #1188FF;
    border-right-color: #ffffff;
    border-right-style: solid;
    border-right-width: 1px;
        z-index: 10;
}

#menu ul {
    list-style: none;
    display: block;
    min-height: 200px;
}

#menu ul li {
    width: 150px;
    height: 25px;
    padding-top: 10px;
    padding-bottom: 4px;
    text-align: center;
    background-color: #992277;
    border-bottom-color: #000000;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-family: Cambria;
}

#menu ul li:hover {
    background-color: #167322;
    color: #ffffff;
}

Ich möchte eine Seite erstellen, nur durch die Verwendung von css mit den folgenden:

  1. header height = 100px; muss immer am Anfang der Seite(dieser Teil ist in Ordnung)
  2. footer height = 60px; muss immer auf der Unterseite der Seite (auch wenn die nicht genügend Inhalte. Wenn der Inhalt der Seite oder über das Menü haben zu viel Inhalt und der browser scroll-Leiste angezeigt wird, dann den footer noch auf der Unterseite positioniert).
  3. muss das Menü in der linken Seite der Seite und hat eine Breite von 150px mit definierten Elemente wie im Beispiel(dieser Teil ist auch wunderbar funktioniert)
  4. den content der Seite erweitern sollten auf dem verbleibenden Platz (es wird angezeigt, mit schwarz. Wenn alle verbleibenden Speicherplatz ist schwarz statt gelb dann sollte es ok sein)

Außerdem sollte die Seite dynamisch ändern, wenn die Größe des Browserfensters geändert wird. Die Lösung soll browser-kompatibel, aber wenn es funktioniert für firefox und/oder chrome-dann ist alles ok.

Ich versucht, dies zu tun eine Menge tricks, aber keiner von Ihnen arbeitete. Ist es möglich, so etwas zu tun, die nur mithilfe von css 2.0?

InformationsquelleAutor Sebastian Strajan | 2013-11-21
  1. 1

    Hier ist ein Turnschuh meiner Auflösung: http://jsfiddle.net/6rVsE/

    2

    hinzufügen #footer: 

    position:fixed; bottom: 0px;

    3

    hinzufügen: #menu: 

    width: 150px;

    hinzufügen: #menu ul li:

    width: 100%;

    4

    weil Sie dabei relativ: ich würde dies beheben, in Javascript. Dieses Beispiel ist mit jQuery.

    $("#page_content").css("height", $(window).height() - $("#header").height() - $("#footer").height() +"px");
    • Ich don ' T wollen, verwenden Sie js oder jquery zu lösen, die page_content relative Höhe, denn ich kann es nicht verwenden. Muss es reines css.
    • Ich habe bereits versucht mit der festen Fußzeile, aber wenn ich zu viel content und dann der footer bleibt am unteren Rand der Seite, aber nicht am Ende des Inhalts der Seite(ich bezog mich auf das Ende). Trotzdem danke für die Antwort!
    • Haben Sie daran gedacht zu nehmen #page_content und geben es, float:right?
    • wenn Sie DEFINE #undef mit irgendeiner bestimmten Höhe könnte es setzen Sie sich etwas näher. jsfiddle.net/6rVsE/3 bekommen Sie ein bisschen näher. Es ändert #Menü float Links, und dann die Höhe des #page_content ist 100% der Seite... #undef und #undef ist, legen Sie entweder 100% oder eine bestimmte Höhe. Wenn es auf 100% eingestellt ist aber es gibt einen offeset, indem Sie die Höhe des header.
    • wenn ich den calc von css3 kann ich dann die Höhe der undef height: calc(100% - 160px);... das bringt mich ein bisschen näher, aber wenn ich habe eine Menge von Elementen in dem Menü kannst sagen 30... dann, wenn ich nach unten scrollen dann den gelben Teil des Hintergrunds startet zeigt mal wieder... das will ich nicht... ich würde mir wünschen, die Höhe berechnet werden relativ zu der Loch-Seite mit allen Inhalten und nicht nur, was Sie sehen in dem Fenster, wenn die Seite geladen wird... (der Schwimmer:richtig - ich habe versucht, es würde aber nicht viel nützen Grund, warum ich verwendet padding-left:150px;
    InformationsquelleAutor Fallenreaper
  2. 1

    wie etwa:

    #header, #menu, #content, #footer {
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

#header {
  height:100px;
  z-index:9999;
}

#menu {
  width:150px;
  padding:100px 0 60px; /* account for header, footer */
  z-index:9997;
}

#content {
  padding:100px 0 60px 150px; /* account for header, menu, footer */
  z-index:9996;
}

#footer {
  height:60px;
  top:inherit;
  bottom:0;
  z-index:9998;
}

    html:

    <body>
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
    • der fixe Ansatz abschneidet, entfernt alle zusätzlichen Inhalte auf der Seite. Es sieht ziemlich leer aus aber mit Inhalt Hinzugefügt, es sieht nicht so. Vielen Dank für deine Antwort!
    InformationsquelleAutor peterchon
Schreibe einen Kommentar