Question

我是HTML和CSS的新手，在玩网页设计时发现了一个非常恼人的问题 - 我正在尝试创建一个固定的标题（制作导航栏）但是...

当使用CSS中的position：fixed属性值对最小化屏幕时，水平滚动条不会出现。

要了解我的意思，请查看下面的代码：打开html，最小化浏览器会创建一个水平滚动条，但是在CSS中删除/ * * /注释符号突然间，这个滚动条停止出现，所有的地狱都因定位而松动。

HTML

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    </head> 
    <body>
        <div></div> 
    </body>
</html>

CSS

body {
    min-width:1000px;
}
div {
    width:100%;
    height:100px;
    background-color:black;
    /* position:fixed; */
}

非常感谢任何有关如何解决此问题的帮助，谢谢，

菲利普。

Answer 1

如果您总是需要横向滚动：只需将overflow-x: scroll;添加到css中的body即可。或者您可以使用@media指定屏幕大小：

@media (max-width: 1000px) {
    body {
        overflow-x: scroll;
    }
}

Answer 2

在容器中使用position:fixed时，整个容器将从正常流程中取出。因此，通常影响正常流中元素的事物不会影响它。（顺便说一句，absolute定位的行为方式相同）。我稍稍调整了你的代码，你可以看到这个。试着玩弄它，希望你能看到一些东西。尝试在CSS中取消注释position:fixed，然后在HTML中取消新的div，然后在CSS中取消top:100px（这会向下推div 100px）。

HTML

<!DOCTYPE html>
 <html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  </head> 
  <body>
    <div class="header">I am the header.</div>

    <!-- <div>
        <p>I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div.</p>
    </div> -->
  </body>

</html>

CSS

body {
min-width:1000px;
color: green;
}
.header {
color: orange;
width:100%;
height:100px;
background-color:black;
/*position:fixed;*/
/*top: 100px;*/

}

HTML / CSS - position：fixed可防止滚动条出现在最小化屏幕上

2 个答案: