流体レイアウトの本体要素を隠す固定ヘッダー

Question

流体レイアウト（すべてのパーセンテージとピクセルなし）で作業しており、ページの上部に固定見出し（#heading）があります。残りのサイトのすべての要素が、見出しのボトムで開始し、ユーザーがスクロールダウンしてもその下に消えないようにします。

私はこの問題を調査しましたが、見出しの高さに等しいサイトのメインコンテンツの上部にパディングを追加することができました。私の知る限り、この解決策は、ブラウザのウィンドウのサイズや解像度が異なると動作が異なるため、ほとんどの場合ピクセルに適用できます。

私はこれを試しましたが、問題は、ブラウザのウィンドウが小さくなると、ソリューションは機能しません。ピクセルではなくパーセンテージを使用しているためです。ブラウザウィンドウを縮小すると、見出しの下にメインコンテンツの上部が消えます。私はどんな指針にも感謝しています。 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：

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;} 

image1

これは、ブラウザのウィンドウのサイズが減少している：

これ

は、通常のサイズのブラウザウィンドウで

基本的には、#headingと#mygalleryの最後に#site_contentをスクロールできる唯一のdivにしたいと考えています。 長い質問に申し訳ありません！

*他のアーティストの作品を単にプレースホルダーとしての開発プロセスのサムネイルとして使用していて、そのサイトがオンラインではなく、それらの画像でオンラインにならないと言いたいだけです。

Answer 1

は

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

}

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

また、あなたのCSS内のすべての現在のメディアクエリを持っているか応答するようにロゴ画像用のdivを使用しますか？
Device Specific CSS Media Queries Collection