html - 固定标题在流体布局中隐藏正文元素

Question

我正在设计一个流畅的布局(使用所有百分比并且没有像素)并且在页面顶部有一个固定的标题(#heading)。我希望网站其余部分的所有元素都从标题的底部开始，并且不会在用户向下滚动时消失在标题下方。

我研究了这个问题，但我能找到的唯一解决方案是在网站主要内容的顶部添加与标题高度相等的填充。据我所知，此解决方案主要适用于像素，因为它们在不同的浏览器窗口大小或分辨率下不会有不同的表现。

我试过了，但问题是因为我使用的是百分比而不是像素，当浏览器窗口变小时，该解决方案不起作用。当我缩小浏览器窗口时，主要内容的顶部仍然在标题下消失。如有任何指点，我将不胜感激。

这是正常大小的浏览器窗口: image1

这是缩小后的浏览器窗口: 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;}

基本上，我希望#site_content 从#heading 的底部开始，而#mygallery 是唯一可以滚动的div。抱歉这个问题太长了!!

*另外只想说，我使用另一位艺术家的作品作为缩略图，纯粹是为了开发过程作为占位符，该网站不在线，也不会与这些图像在线。

Answer 1

为 Logo 图像使用 div 以响应

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

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

您的 CSS 中是否还有所有当前的媒体查询？
Device Specific CSS Media Queries Collection