Html Floating, 100% Höhe

Question

Ich versuche, meine Website zu machen, aber ich habe ein Problem mit der Größe des Bildschirms. Ich möchte es etwas reaktionsschneller machen, und mein Layout ist - Kopfzeile oben, dann Menü und Fußzeile, aber es ist 25% der Breite, und ich weiß nicht, wie ich es auf 100% Höhe ändern kann. Ich will es so aussehen: http://s32.postimg.org/9pa325s3p/img.png
Mein Code:

<header>header </header> 
<section id="menu">menu</section> 
<footer>footer </footer> 

CSS-Code ist nicht wichtig.

Answer 1

Hier ist eine Lösung, die in Browsern vor CSS3 funktionieren sollte.

Das Menü und die Fußzeile sind in einem Wrapper div. Der Wrapper div wird height:100% und beginnt am Anfang der Seite mit margin-top:-40px. Der Wrapperdiv erhält position:relative, so dass alle Elemente innerhalb dieses Containerelements positioniert sind.

Für das Menü, wir positionieren absolut mit top:40px so überlappen wir nicht die Kopfzeile und bottom:40px, so dass wir vor der Fußzeile stoppen.

Footer-Stile sind offensichtlich - position:absolute mit bottom:0, so dass wir den unteren Rand der Seite.

<style> 
header { 
    height:40px; 
    background-color:yellow; 
} 
#menufootercontainer { 
    position:relative; 
    height:100%; 
    margin-top:-40px; 
    position:relative; 
} 
#menu { 
    width:80px; 
    position:absolute; 
    top:40px; 
    bottom:40px; 
    background-color:green; 
} 
footer { 
    width:80px; 
    height:40px; 
    position:absolute; 
    bottom:0; 
    background-color:red; 
} 
</style> 

<header>header</header> 
<div id="menufootercontainer"> 
<section id="menu">menu</section> 
<footer>footer</footer> 
</div> 

Answer 2

Try vh Einheiten dort zu verwenden:

#menu { 
    height: calc(100vh - 80px); 
} 

Answer 3

Die einfachste, was man tun kann, um die Sektion und Fußzeile Elemente in einem ‚Wrapper‘ div ist wickeln oder ein anderes Block-Element (zur Seite, Abschnitt, nav , etc.) Sie mögen, wie folgt aus:

<div ID="sidebar-wrapper"> 
    <header>header </header> 
    <section id="menu">menu</section> 
    <footer>footer </footer> 
</div> 

Sobald Sie das tun, es so einfach ist die # sidebar-Wrapper eine Höhe von 100% und einer Breite von 25% geben. Und schließlich geben Sie Ihrem Menü und Fußzeile die gewünschten Höhen als Prozentsätze.

#sidebar-wrapper { 
    width: 25%; 
    height: 100%; 
} 
section { 
    height: 90%; 
} 
footer { 
height: 10% 
} 

Sobald das erledigt ist, sollte Ihr Layout genau so sein, wie es auf dem Bild ist.

P.S: Wenn Sie planen, Navigationslinks in diesem Abschnittselement zu haben (was ich Ihnen vorstelle), sollten Sie stattdessen 'nav' verwenden, um semantischer zu sein :).