我的滾動條不在瀏覽器的右側？

我比較新的CSS/HTML。對於一個學校項目，我不得不製作一個無響應的1140px網站。我決定我希望1140px在兩側都具有白色背景顏色（在瀏覽器中間），我希望它具有深灰色。我的滾動條不在瀏覽器的右側？

所以我把黑灰色的顏色放在我的html上，白色的顏色放到我的身上，寬度爲1140px。我不得不在html上放置「overflow：hidden」，否則身體的白色背景顏色不會顯示。但問題是，因爲我的滾動條不在瀏覽器的最右側，因爲這個隱藏的溢出，而是它在我的身體右側。

截圖我的問題：

http://i68.tinypic.com/hvxjdj.png

html { 
    background-color: rgb(50,50,50); 
    overflow: hidden; 
} 

body { 
    line-height: 1; 
    width: 1140px; 
    margin: 0 auto; 
    background-color: white; 
    overflow: auto; 
    box-shadow:0px 0px 20px #000000; 
}

有沒有我的滾動條移動到右側，而忽略溢出隱藏屬性的方法嗎？或者有另一種方法來獲得相同的背景結果？

來源

2016-03-26 Sarah Van Den Berghe

你可以做一個片段或演示該問題上的jsfiddle什麼？除了你在這裏告訴我們的一定還有別的事情，因爲如果我用你的信息[小提琴]（https://jsfiddle.net/MrLister/8m6w3876/1/），它只是顯示滾動條在窗口的右邊緣。 –

您通常應該儘量避免過多地設計html標籤的樣式。在許多情況下，HTML標籤不會被瀏覽器視爲單獨的塊元素。很明顯，在這裏，你需要刪除HTML標籤的溢出聲明，並找到一個更好的方式來配置你想要的...只是身體，然後是你的內容的div。 – Scott

事實上，你是對的先生李斯特，還有其他問題，所以我看了整個CSS我的代碼： HTML，身體{ 分鐘高度：100％; 身高：100％; } 我刪除了，它工作正常。沒有發生過這種事，謝謝！未來我會嘗試另一種方式，新的這個，但我會記住每一個，也謝謝你斯科特！ –

刪除您的html上的overflow:hidden，並使您的身體寬度100％，然後使其背景顏色透明。這會給你一個完整的黑灰色頁面（因爲HTMl已經有了grey bckground）。現在在身體內添加一個div，並將其背景顏色設置爲白色。還可以讓你的div放在中間位置，讓剩餘的邊距和邊距正確，把你的所有內容放入這個div。就是這樣，現在你將在瀏覽器的最右側有滾動條。這裏是一個片段，它可以幫助你

html{ 
 
    background-color:grey; 
 
} 
 

 
body{ 
 
    width:100%; 
 
    height:auto; 
 
    background-color:transparent; 
 
} 
 

 
.appContainer{ 
 
    margin: 0px 40px 0px 40px; 
 
    background-color:white; 
 
    height:2000px; 
 
}

<body> 
 
<div class="appContainer"> 
 
    
 
</div> 
 
</body>

來源

2016-03-26 19:04:38

哦，謝謝！我下次會這樣做，我不知道正確的方法:) –

@SarahVanDenBerghe如果這個解決方案幫助你解決了你的問題，那麼請把它標記爲答案，因爲它可能對未來的觀衆有用 –

我的滾動條不在瀏覽器的右側？

回答

相關問題