CSS Wallpaper and Horizontal Scroll Bars
source link: https://www.codesd.com/item/css-wallpaper-and-horizontal-scroll-bars.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS Wallpaper and Horizontal Scroll Bars
Can anyone enlighten me to why the following occurs with this test case?
<!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>
When the window is big enough to accommodate 960px, everything works as expected.
When the window is resized to smaller than 960px a horizontal scrollbar appears (As expected). However, when scrolling horizontally it appears that the .section div has not been stretched across the document and appears only to be the width of the window, therefore revealing the body's white background.
I would normally expect the black, .section div to stretch across the document since it's display: block by default.
Does anyone know why this is happening and more importantly, how to get the result I expect?
Cheers
It's because the witdth of your section is only as big as what's in it. In this case this means your wrapper which is set to 960px. Setting the section in percentage only works as percentage of the available screen, so width:100% wouldn't solve this. You should set your section width to a specific number and that would fix the issue.
Edit: Use min-width instead of width and it works even better for when you go bigger than you min-width.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK