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

我对HTML和CSS非常陌生，虽然玩弄网页设计时发现很恼人的问题 - 我试图创建一个固定的标题做一个导航栏）但是...HTML/CSS - position：fixed防止滚动条出现在最小化的屏幕上

当屏幕最小化与固定属性值对在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; */ 
}

如何解决这个问题的任何帮助将不胜感激，谢谢，

菲利普。

来源

2014-07-13 Philip Hartfield

它不是一个问题，这是多么的位置固定的工作。你可以张贴你想做的事情的小提琴或codepen演示。 – Tushar

基本上，我试图让我的浏览器最小化时显示滚动条，但同时我有我的div位置：固定在CSS中，我不能这样做。 –

如果您需要水平滚动总是：只需将overflow-x: scroll;添加到body在CSS中。或当它与@media您可以指定屏幕尺寸：

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

来源

2014-07-13 03:40:01

这似乎不工作，因为滚动条被锁定，但也许我只是做错了 –

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

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;*/ 

}

来源

2014-07-13 05:34:26

我已经尝试过这一点，虽然它确实使我滚动水平时最小化，固定标题水平固定，这是说从左到右滚动'我是标题'始终在屏幕左侧可见 - 是否有某种方法可以防止这种水平定位，理想情况下标题将垂直固定，但我可以水平滚动其内容，即当我将浏览器向右滚动时，“我是标题”文本将移出视图。 –

***编辑***：我想说的是这个作品，但有没有办法让位置：固定在一个轴上？所以当某人上下滚动时，这个位置是固定的，但是当某个人从一边滚动到另一边时，他们会滚动div。谢谢 –

看起来'固定'定位'禁用'所有方向的滚动功能（这就是为什么当你只有一个'div'并且在开始处应用'position：fixed'时不能水平滚动的原因。所以它在所有方向上都是固定的，唯一可以移动的方法是使用诸如“left”/“right”和“top”/“bottom”之类的属性。你是想用它做点什么，或者你只是好奇？请注意，如果您的标题中的文字较长，则无需水平滚动即可查看整个内容。 –

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

回答

相关问题