CSS背景和水平滾動條
[英]CSS backgrounds and horizontal scrollbars
問題描述
誰能啟發我為什么這個測試用例會發生以下情況？
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
margin: 0;
padding: 0;
}
.section {
background-color: #000000;
color: #ffffff;
}
.wrap {
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="section">
<div class="wrap">Some content here</div>
</div>
</body>
</html>
當窗口大到足以容納960px時，一切都會按預期進行。
當窗口大小調整為小於960px時，出現水平滾動條（如預期）。 但是，在水平滾動時，似乎.section div尚未在文檔中拉伸，而僅顯示為窗口的寬度，因此顯示了正文的白色背景。
我通常希望黑色的.section div在文檔中延伸，因為它是display：默認為block。
有誰知道為什么會這樣，更重要的是，如何獲得我期望的結果？
干杯
2 個解決方案
解決方案1
1 已采納 2014-03-26 22:02:21
這是因為您的部分的威力與它的內容一樣大。 在這種情況下，這意味着您的包裝器設置為960px。 將部分設置為百分比只能用作可用屏幕的百分比，因此width：100％不能解決此問題。 您應該將斷面寬度設置為特定數字，這樣可以解決此問題。
編輯：使用最小寬度而不是寬度，並且當您大於最小寬度時，效果更好。
解決方案2
0 2014-03-26 21:58:32
部分調整大小，嘗試在.section上設置width：100％
此外，您可能需要將此添加到.wrap
保證金左：自動; 保證金右：自動;
這將使包裝div居中
CSS：帶邊框的div中高度/寬度為100％的DIV會創建垂直滾動條，而不是水平滾動條
[英]CSS: 100%-height/width DIV inside a bordered div creates vertical, but not horizontal scrollbars
如何自動調整CSS的寬度，以便水平滾動條可以自動調整而不占用太多空間？
[英]How to Automatically adjust width in CSS so horizontal scrollbars would adjust automatically without taking so much space?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.