Question

在我完成第一个网站的调用之前，还有一个问题需要解决，我会非常感谢这个社区的帮助。

您可以在www.dylanbisch.com

查看我自己的网站

我想要解决的问题出现在课程artdesign和tumblr-wrapper之间的主屏幕上。

基本上，“artdesign”类包含两个圆形按钮，“tumblr-wrapper”类包含主屏幕上的黑白照片。

如果缩小浏览器窗口然后尝试向左和向右滚动，则会出现问题。而不是在整个页面上左右滚动，只有“tumblr-wrapper”类中的黑白照片左右滚动。

我正在寻找一种解决方案，可以阻止tumblr-wrapper在浏览器窗口很小的时候成为滚动的唯一东西，并且会在向右滚动时创建整页。

我希望我已经充分解释了问题，但如果我需要以不同的方式解释，请告诉我。

Answer 1

在370 of style.css行，您position:fixed已应用.artdesign。

我不确定将它完全放在那里的逻辑是什么，但如果你删除它，页面将按预期滚动。

固定位置意味着div是固定的并且不会移动（即使你滚动），它主要用于将页眉和页脚粘贴到页面的顶部和底部。（就像twitter bootstrap page [注意顶部的黑色标题菜单？..那fixed]）

基本上是这样的：

.artdesign { /* Line 370 of style.css */
    float: left;
    padding: 200px 0 0 10px;
    position: fixed; /* REMOVE THIS POSITION FIXED TO SCROLL! */
    width: 579px;
    list-style-type: none;
}

Answer 2

您将.artdesign设置为“position：fixed”，因此它将始终保持在同一窗口位置。将其更改为“position：absolute”，这应解决问题。

调整浏览器窗口大小导致的CSS定位更改

2 个答案: