CSS backgrounds and horizontal scrollbars

StackOverflow https://stackoverflow.com/questions/22673844

سؤال

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.

نصائح أخرى

section is sizing to it's contents, try setting width:100% on .section

In addition, you may want to add this to .wrap

margin-left:auto; margin-right:auto;

that will center the wrap div

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top