HTML/CSS -位置:固定防止滚动条出现在最小化的屏幕上
我对HTML和CSS非常陌生，在玩网页设计时发现了一个非常烦人的问题--我正在尝试创建一个固定的标题(创建一个导航栏)，但是.
当屏幕以CSS中固定属性值对的位置最小化时，水平滚动条不会出现。
要理解我的意思，请看下面的代码:打开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; */
}对如何解决这一问题的任何帮助将不胜感激，谢谢，
菲利普。
回答 2
Stack Overflow用户
发布于 2014-07-13 03:40:01
如果您总是需要水平滚动:只需在css中向overflow-x: scroll;添加body即可。或者，您可以在屏幕使用@media时指定屏幕大小。
@media (max-width: 1000px) {
body {
overflow-x: scroll;
}
}Stack Overflow用户
发布于 2014-07-13 05:34:26
当您在容器中使用position:fixed时，整个容器将脱离正常的流。因此，通常影响正常流中的元素的东西不会影响它。(顺便说一下，absolute定位的行为也是一样的)。我稍微修改了一下您的代码，这样您就可以看到这个了。试着玩一玩，希望你能看到一些东西。尝试取消CSS中的position:fixed注释，然后在div中删除新的div，然后在top:100px中删除top:100px(这会向下推div 100 in )。
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;*/
}https://stackoverflow.com/questions/24719277
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号