Question

我必须首先说这是一个巨大的学习曲线，网站项目是我业余时间作为礼物给某人，所以我的知识是有限的，虽然我认为我理解基础知识。还请注意，我确实有另一个更基本，不那么有趣的网站，它已经建成备份，所以如果我被告知我的所有代码都是垃圾而且我需要重新开始，我就不会心碎！ / p>

我正在为一位化妆师创建一个单页，横向滚动的投资组合网站，这需要我在左侧有一个固定横幅和我的菜单列表，并且使用javascript，页面滚动不错顺利到相关部门。

我的屏幕分辨率看起来很棒，我的浏览器大小合适，但我注意到如果我缩小浏览器窗口，固定导航横幅开始滚动到位，而其他所有内容都保持在一起应该。

最终结果应该是所有内容都保留在原位，唯一的“移动部分”是滚动部分的内容，因此当调整浏览器大小时，所有内容都会重新调整大小或至少滚动在一起。

我已经玩过将所有内容包装在内容div中，并且我尝试了不同的定位，但似乎没有任何工作。

这是我的基本html布局：

<html>
<body>

<div id="banner"> <!--this is the fixed nav banner-->
<ul>
    <li><a href="#portfolio">PORTFOLIO</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#testimonials">TESTIMONIALS</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>
</div>

<div id="portfolio" class="bigpanel">
<div id="portfolioimages">
    <!--IMAGES GO HERE-->
</div>
</div>

<div id="about" class="panel">
</div>

<div id="testimonials" class="bigpanel">
</div>

<div id="contact" class="bigpanel">
</div>

<div id="footer">
</div>

</body>
</html>

...和CSS：

body {
    width: 15000px;
    height: 580px;
    background-color: #fcf4f1;
    position: absolute;
    margin: 2% 0 5% 0;
}

#footer {
    position: fixed;
    left: 935px;
    top: 645px;
    margin: 10px;
}

#banner {
    position: fixed;
    height: 580px;
    width: 200px;
    background-color: #fff;
    opacity: 0.8;
    line-height: 20px;
    margin: 45px 0px 0px 20px;
    padding: 0;
    z-index: 999;
}

.panel {
    width: 930px;
    float: left;
    padding-left: 242px;
    padding-right: 1040px;
    margin-top: 45px;
}

.bigpanel {
    float: left;
    padding-left: 242px;
    padding-right: 1040px;
    margin-top:45px;
}

Pic of how the site is at the correct size

...and a pic of how it looks when it's squished in height!

我试图尽可能彻底地为那个漫长的人抱歉！

非常感谢任何帮助。

Answer 1

好的，我不知道我是否有适合每个人的答案，但它肯定适合我。

我基本上已经仔细研究了我如何定义网站中所有元素的宽度和高度，并确定尽管需要为主体和横幅修复宽度，但高度可以根据视口大小做出响应。

我将所有东西都包裹在一个非常宽的包装div中，高度设置为100％，但是将身高设置为84vh，最大高度为700px（因此我的图像可以具有相同的最大高度，并且总是看起来好）。

这样我也可以将横幅设置为高度：84vh，最大高度为700px，因此它永远不会溢出，但总是缩小。

我将包装纸的边距设置为垂直居中，现在虽然所有东西都装在容器内，但没有垂直滚动！

我确信很多都是一个丑陋的解决方案，因为我的编码不好而现在可以正常使用了！

Answer 2

我必须通过将top div添加到#banner div来播放0。这项工作仅适用于fixed，absolute，relative等位置。无论如何，它将在您的浏览器窗口顶部修复div。 这是＆＃34; top padding＆＃34; （disantce）你div会相对于屏幕的显示。

所以你应该添加

top: 0;

到

#banner

它应该有效！

如果你想要一个效率的例子，我建议你看看这个代码：http://codepen.io/Symsym/pen/LsjCK

干杯！并告诉我它是否有效。

Answer 3

<body>
<div class="banner"> <!--this is the fixed nav banner-->
  <ul>
  <li><a href="#portfolio">PORTFOLIO</a></li>
  <li><a href="#about">ABOUT</a></li>
  <li><a href="#testimonials">TESTIMONIALS</a></li>
  <li><a href="#contact">CONTACT</a></li>
  </ul>
</div>
<div class='content'>
  <div id="portfolio" class="bigpanel">
  <div id="portfolioimages">
      <!--IMAGES GO HERE-->
  </div>
  </div>

  <div id="about" class="panel">
    about
  </div>

  <div id="testimonials" class="bigpanel">
   testimonials
  </div>

  <div id="contact" class="bigpanel">
   contact
  </div>
</div>
<div class="footer">
 footer is here!!
</div>

css代码：

body {
    background-color: '#fcf4f1';
    overflow:hidden;
}

a{
  text-decoration:none;
}

li{
  list-style:none;
}

.banner {
    position: fixed;
    width: 200px;
    background-color: '#ccc';
    opacity: 0.8;
    padding: 0;
    z-index: 999;
    top:20px;
    left:0;
}

.content{
  width:800px;
  margin-left:200px;
  overflow:auto;
  float:left;
}

.panel {
    margin-top:10px;
    width: 930px;
    float: left;
}

.bigpanel {
    float: left;
    margin-top:20px;
}

.footer {
    position: fixed;
    bottom: 0;
    left:0;
    right:0;
    background:red;
    margin: 10px;
}

您可以滚动内容。

在调整浏览器大小时，如何防止固定定位元素滚动？

3 个答案: