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防止滾動條出現在最小化的屏幕上

回答

相關問題