寬度在身體頂部100％需要滾動

我想讓div穿過頁面寬度，而不管其屏幕大小如何。我遇到的問題是，儘管寬度是100％，但當我查看頁面時，它需要水平滾動。我查找了解決方案並嘗試了有關body元素的建議，但我仍然遇到此問題。這裏是我的身體和div元素：寬度在身體頂部100％需要滾動

body{ 
    background-color: #9F6164; 
    margin:0px; 
    margin-top: .6em; 
    width: 100%; 
    height: 100%; 
    padding:0px; 
} 

#controlpanel { 
    height:8em; 
    width:100%; 
    background-color:#F8DEBD; 
    padding: 1em; 
    margin-right: 1em; 
    border-bottom: 3px groove black; 
    float:center; 
    margin: 0 auto; 

}

要清楚這不是作業，我正在做這個個人項目。

來源

2017-04-16 theupandup

所以你不想要水平滾動條？ – cosmoonot

這是正確的。我希望div完全適合沒有水平滾動的主體，不管顯示器的大小如何 – theupandup

overflow-x：hidden'通常是一個解決方案，一個糟糕的解決方案，但仍然是一個解決方案 – Vivick

您可以使用overflow-x來隱藏水平溢出。您也可以使用overflow:hidden，但下面的代碼專門針對水平滾動條。

body { 
    background-color: #9F6164; 
    margin:0px; 
    margin-top: .6em; 
    width: 100%; 
    height: 100%; 
    padding:0px; 
    overflow-x:hidden; /* hide the horizontal overflow */ 
}

來源

2017-04-16 19:25:30 cosmoonot

這正是我所需要的。謝謝！ – theupandup

提供的解決方案cosmonot是不正確的，只會導致你問題時，你的div的內容綿延關屏當有溢出的問題，你不能再排查，因爲你將不能夠在水平方向看到一個滾動條。

真正的問題是，你的div使用寬度：100％來佔據整個可用的水平空間，然後在你指定的填充處加上額外的寬度，這會導致整體寬度超過100％身體元素溢出並因此使其水平滾動。

解決方案是不改變你的身體的溢出屬性，解決方案是應用框大小：邊框;到您的控制面板div。這將使您指定的寬度爲包括您指定的填充和邊距。

例

#controlpanel { 
    height:8em; 
    width:100%; 
    background-color:#F8DEBD; 
    padding: 1em; 
    margin-right: 1em; 
    border-bottom: 3px groove black; 
    float:center; 
    margin: 0 auto; 
}

今後儘量不要玩的身體，它通常是什麼，你把它需要被troubleshooted。

來源

2017-04-16 19:28:32

@skiesareflying按照對此答案的建議。我提供的是一個快速的技巧，但不是一個適當的解決方案。 – cosmoonot

是的，它是100％的寬度，但瀏覽器也增加了1em的填充，所以它現在是100％+ 1em。您沒有設置框大小屬性，並且默認情況下它是內容框。

如果你希望你的佈局，以更自然的行爲，將它添加到您的代碼：

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

這裏檢查它：https://jsfiddle.net/avyxhfcp/

BTW：有沒有「浮動：中心;」

來源

2017-04-16 19:28:55

寬度在身體頂部100％需要滾動

回答

相關問題