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

使用div使徽标图像具有响应性

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

}

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

你的css中还有所有当前的媒体查询吗？ Device Specific CSS Media Queries Collection

固定标题隐藏流体布局中的正文元素

1 个答案: