Wie man den Inhaltsbereich mit CSS dynamisch und ohne JavaScript neu dimensioniert

Question

Was ich möchte ist dies:

• Der blaue Bereich passt sich an, wenn das Browserfenster vergrößert wird.
• Der Header ist sichtbar.
• Der blaue Bereich beginnt dort, wo der Header endet (nicht hinter dem Header oder darüber).
• Der blaue Bereich endet vor dem Footer.
• Zwischen dem blauen Bereich und dem Footer existieren 5 gelbe Pixel.

Ist dies nur mit CSS und HTML möglich (ohne JavaScript)?

    Test

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

    header, nav, article, footer, address {  
        display: block;  
    }

    header{
        position:relative; height: 50px; background-color:#2b2b2b;
    }

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
    }

    #explorer{
        position:relative; bottom:55px; 
    }

    #sections{
        width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
    }

        Test

    

       /* Footer Content */

Answer 1

Ich denke, Kits Code benötigt nur eine Anpassung und das ist, dass wir die height:100% aus dem sections div entfernen müssen und es wird einwandfrei funktionieren. Während des Tests des folgenden Codes habe ich auch festgestellt, dass der Footer tatsächlich über dem Header erscheint, wenn wir die Höhe über ein bestimmtes Limit reduzieren. Obwohl die Höhe praktisch nie so gering wäre, möchten Sie vielleicht trotzdem z-index:5000 zum header tag hinzufügen.

Answer 2

So?

    Test

    html, body, h1 {
        margin:0px;
        padding:0px;
    }

    header, nav, article, section, footer, address {  
        display: block;  
    }

    header {
        position:relative;
        height: 50px;
        width: 100%;
        background-color:#2b2b2b;
    }

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
        border-top: 5px solid yellow;
    }

    #explorer{
        position:relative; bottom:55px; 
    }

    #sections{
        width: 100%;
        height: 100%;
        bottom: 55px;
        position:fixed;
        top: 50px;
        background: rgba(0,0,256,.5);
    }

        Test

         

        /* Fußzeil Inhalt */