Question

我有一个页面，其中背景图像在整个页面上，但是当我调整窗口大小时，背景图像位于正文之外，导致水平滚动条和左侧的空白区域。此外，我有一个粘性页脚来自这个网站http://mystrd.at/modern-clean-css-sticky-footer/，以保持我的页脚在底部，并有另一个div与图像（.f_logo）应该放在身体和页脚之间，但是当我调整窗口大小时，f_logo在左边的身体之外，我又有了白色空间。为什么我的背景图片在调整大小时是在身体之外以及为什么同样在.f_logo中感到高兴？顺便说一下布局没有响应。请停止我。非常感谢你。我附上了我的页面 enter image description here

的演示

 <body class="page">
        <div class="square">

        </div>![enter image description here][2]
        <div class="wrapper">
            <header>
                <img src="../Images/login_logo.png">
            </header>
            <div class="main_content">
                here is my login block

                <div class="clearfix"></div>
            </div>
            <footer>
                <div class="footer_inner">
                    <div class="f_text">
                        <p>&copy;text</p>
                        <div class="f_logo">
                            <img src="../Images/footer_logo.png" />
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </body>

CSS

 <style type="text/css">
        html
        {
            position: relative;
            min-height: 100%;
            -webkit-font-smoothing: antialiased;
        }

        body.page
        {
            background: url(../Images/bg_image.png),-moz-linear-gradient(top, #003953 0%, #004d6f 44%, #006591 100%); /* FF3.6+ */
            background: url(../Images/bg_image.png),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#003953), color-stop(44%,#004d6f), color-stop(100%,#006591)); /* Chrome,Safari4+ */
            background: url(../Images/bg_image.png),-webkit-linear-gradient(top, #003953 0%,#004d6f 44%,#006591 100%); /* Chrome10+,Safari5.1+ */
            background: url(../Images/bg_image.png),-o-linear-gradient(top, #003953 0%,#004d6f 44%,#006591 100%); /* Opera 11.10+ */
            background: url(../Images/bg_image.png),-ms-linear-gradient(top, #003953 0%,#004d6f 44%,#006591 100%); /* IE10+ */
            background: url(../Images/bg_image.png),linear-gradient(to bottom, #003953 0%,#004d6f 44%,#006591 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003953', endColorstr='#006591',GradientType=0 ); /* IE6-9 */
            margin: 0;
            padding: 0;
            background-repeat: no-repeat !important;
            background-position: center top !important;
            color: #000;
            margin: 0 0 70px;
            font-family: "Myriad Pro";
        }

        .page .wrapper
        {
            width: 100%;
        }

        .wrapper header
        {
            margin: 0 auto;
            width: 1120px;
            margin-top: 135px;
        }

        .wrapper .main_content
        {
            margin: 0 auto;
            width: 1120px;
        }

        .login_block
        {
            background: #fefefe;
            width: 324px;
            border: 1px solid #8d8c8c;
            border-radius: 3px;
            padding: 30px 0;
            color: #8d8f8e;
            margin-top: 35px;
        }

        .wrapper footer
        {
            height: 70px;
            margin: 0;
            padding: 30px 0 5px;
            position: absolute;
            bottom: 0;
            width: 100%;
            background: white;
            -webkit-box-shadow: inset 1px 10px 11px 0px rgba(141,141,141,1);
            -moz-box-shadow: inset 1px 10px 11px 0px rgba(141,141,141,1);
            box-shadow: inset 1px 10px 11px 0px rgba(141,141,141,1);
        }

        .footer_inner
        {
            width: 1120px;
            margin: 0 auto;
        }

        .f_text
        {
            padding-top: 15px;
            font-family: "Myriad Pro";
            position: relative;
        }

        .f_logo
        {
            position: absolute;
            right: 0;
            top: -46px;
        }
    </style>

Answer 1

由于您的元素是固定大小的，因此请使用最宽的＆＃34; div，在这种情况下，从你的标题是1120px，就像这样把它放在

html
        {
            // all the other styles... 
            min-width: 1120px;
        }

工作演示：http://jsfiddle.net/48TTt/1/

调整页面大小时整页左侧的空白区域

1 个答案: