Fixed Überschrift Verbergen von Körperelementen in Flüssigkeit Layout

Question

Ich arbeite an einem flüssigen Layout (mit allen Prozentangaben und keine Pixel) und haben eine feste Überschrift (#heading) am oberen Rand der Seite. Ich möchte, dass alle Elemente des Rests der Site bei unten der Überschrift beginnen und nicht darunter verschwinden, während der Benutzer nach unten scrollt.

Ich recherchierte dieses Problem, aber die einzige Lösung, die ich finden konnte, war, oben auf dem Hauptinhalt der Website, die gleich der Höhe der Überschrift ist, Padding hinzuzufügen. Diese Lösung war meines Wissens hauptsächlich auf Pixel anwendbar, da sie sich bei verschiedenen Browserfenstergrößen oder -auflösungen nicht unterschiedlich verhalten.

Ich versuchte dies, aber das Problem ist, dass, weil ich Prozentsätze und nicht Pixel verwende, die Lösung nicht funktioniert, wenn das Browserfenster kleiner gemacht wird. Wenn ich das Browserfenster verkleinere, verschwindet der obere Teil des Hauptinhalts immer noch unter der Überschrift. Ich wäre dankbar für irgendwelche Hinweise.

Dies ist das Browser-Fenster in Normalgröße: image2

HTML:

<div id="wrap"> 
<div id="heading"> 
<div id="name"> 
    <img src="logo.svg" width=100%> 
</div> 
<div id="navbar"> 
    <a href="index.html">HOME</a> <a href="portfolio_start.html">PORTFOLIO</a> <a href="about.html">ABOUT</a><a href="contact.html">CONTACT</a> <a href="resume.html">RESUME</a> 
</div> 
</div> 

<div id="site_content"> 
    <div id="side_panel_portfolio"> 
    <a href="portfolio_illustration.html">Illustration</a><br> 
    <a href="portfolio_gd.html">Graphic Design</a> <br> 
    <a href="portfolio_web.html">Web Design</a> 
    </div> 

    <div class="divider"> 
    </div> 

    <div id="mygallery"> 
    <!--(the images)--> 
    </div> 

    </div> <!--End of #site_content--> 

    </div> <!--End of #wrap--> 

CSS: image1

Dies ist das Browserfenster verringert in der Größe ist

body {height:100%; 
    font-family: 'Helvetica', sans-serif; 
    font-weight:lighter; 
    font-size:1.3vmax;} 
#heading{height:14%; 
    width:100%; 
    font-family: 'Raleway', sans-serif; 
    font-weight:300; 
    background-color:#ffffff; 
    top:0; 
    padding-top:0; 
    padding-left:0; 
    Padding-right:0; 
    position:fixed; 
    z-index:100;} 
#site_content{padding-top:6.7%; 
     z-index:99; 
     height:100%;} 
#side_panel_portfolio{float:left; 
    padding-left:3%; 
    position:fixed;} 
#mygallery{float:right; 
     width:79%; 
     padding-right:%; 
     padding-left:3%;} 
#portfolio_start{padding-left:18%;} 
.divider{position:fixed; 
    left:15%; 
    top:14.7%; 
    bottom:40%; 
    border-left:1px solid black;} 

Ich möchte #site_content im unteren Bereich von #heading beginnen und #mygallery als einziges div, das scrollen kann. Sorry für die lange Frage !!

* Ich möchte auch nur sagen, dass ich die Arbeit eines anderen Künstlers als Thumbnails rein für den Entwicklungsprozess als Platzhalter verwende und diese Seite NICHT online ist und nicht online mit diesen Bildern sein wird.

Answer 1

ein div für das Logo-Bild verwenden zu

#logo { 
display:block; 
width:100%; 

}

<div id="logo"> 
    <img src="logo.svg"> 
</div> 

reagieren auch Sie haben alle aktuellen Medienanfragen in Ihrem CSS?
Device Specific CSS Media Queries Collection