Aufteilung der HTML Seite in horizontale Sektionen ohne vertikale Scrollbalken

Ich versuche zu schaffen, so etwas wie dieses:

http://jsfiddle.net/S6FUQ/

HTML ist:

<div id="container">
    <header></header>
    <main>
        <section class="half"></section>
        <section class="half"></section>
    </main>
</div>

Und CSS ist:

* {
    margin: 0; padding: 0;
}
html, body, #container {
    height: 100%;
}
header {
    height: 50px;
    background: gray;
}
main {
    height: 100%;
    background: green;
}
.half {
    height: 50%;
}
.half:first-child {
    background: blue;
}
.half:last-child {
    background: yellow;
}

In, ich habe einem dünnen Band an der Spitze, und ich möchte zu teilen den rest der Bildschirm in zwei gleiche Teile teilen, ich will aber keine vertikale scrollbar angezeigt.

Versuchte ich margin-bottom: 50px; für main, aber es hat nicht funktioniert. Was soll ich tun?

InformationsquelleAutor Mehdi Emrani | 2013-10-08

  1. 16

    Höhe von "main" sollte es sein, 100% - 50px. Hier ist die fiddle.

    main{height: calc(100% - 50px);}
    das ist mein problem gelöst, aber "Die folgenden Funktionen werden bei Risiko und kann gelöscht werden, während der CR-Periode: 'calc()', 'toggle()', 'attr()'." CSS-Werte und Einheiten-Modul-Ebene 3 - w3.org/TR/css3-values
    stimmt, ich schlage vor, Sie halten die header auch in % - basis. zum Beispiel 20% - header, 80% rest des Körpers.

    InformationsquelleAutor Hiral

  2. 4

    Machen, damit es funktioniert auf alten Browsern, könnten Sie mit absoluter Positionierung.

    Demo

    #container {
    position: relative;
}
main {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 0;
    background: green;
}
    Wieso der downvote? Es funktioniert gut, auch auf alten Browsern...

    InformationsquelleAutor Oriol

  3. 3

    Sind Sie bereits mit % Höhe festlegen... Warum gehst du nicht wieder verwenden, um Ihr problem zu lösen?

    header {
    height: 10%;
    background: gray;
    max-height:50px; //this will ensure your header will never go bigger than 50px
}
main {
    height: 90%;
    background: green;
}

    PS: Das einzige mal, dein Kopf wird kleiner als 50 Pixel ist, wenn der browser kleiner als 500 Pixel haben (die werden nur in einigen Landschaft, mobile Geräte)

    BEISPIEL

    InformationsquelleAutor Thanos

Schreibe einen Kommentar