Html 调整页面大小时，整个页面左侧出现空白_Html_Css_Layout

Html 调整页面大小时，整个页面左侧出现空白

html css layout

Html 调整页面大小时，整个页面左侧出现空白,html,css,layout,Html,Css,Layout,我有一个页面，背景图像位于整个页面上，但当我调整窗口大小时，背景图像位于主体外部，这会导致水平滚动条和左侧空白。此外，我有一个粘性页脚从这个网站上保持我的页脚在底部，并有一个图像（.f_标志）的另一个div，这是应该定位在主体和页脚之间，但当我调整窗口大小时，f_徽标位于主体外部的左侧，我又有了空白。为什么我的背景图片在调整尺寸时位于身体外部，以及为什么相同的.f_标志出现？顺便说一下，布局没有响应性。请让我停下来，非常感谢。我附上我的网页演示 <body class="page"

我有一个页面，背景图像位于整个页面上，但当我调整窗口大小时，背景图像位于主体外部，这会导致水平滚动条和左侧空白。此外，我有一个粘性页脚从这个网站上保持我的页脚在底部，并有一个图像（.f_标志）的另一个div，这是应该定位在主体和页脚之间，但当我调整窗口大小时，f_徽标位于主体外部的左侧，我又有了空白。为什么我的背景图片在调整尺寸时位于身体外部，以及为什么相同的.f_标志出现？顺便说一下，布局没有响应性。请让我停下来，非常感谢。我附上我的网页演示

 <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>


![在此处输入图像描述][2]
这是我的登录块
&抄袭；正文

css


html
{
位置：相对位置；
最小高度：100%；
-webkit字体平滑：抗锯齿；
}
body.page
{
背景：url（../Images/bg_image.png），-moz线性渐变（顶部，#003953 0%，#004d6f 44%，#006591 100%）；/*FF3.6+*/
背景：url（../Images/bg_image.png），-webkit渐变（线性、左上、左下、色挡（0%、#003953）、色挡（44%、#004d6f）、色挡（100%、#006591））；/*铬、Safari4+*/
背景：url（../Images/bg_image.png），-webkit线性渐变（顶部，#003953 0%，#004d6f 44%，#006591 100%）；/*Chrome10+，Safari5.1+*/
背景：url（../Images/bg_image.png），-o-linear-gradient（顶部，#003953 0%，#004d6f 44%，#006591 100%）；/*Opera 11.10+*/
背景：url（../Images/bg_image.png），-ms线性渐变（顶部，#003953 0%，#004d6f 44%，#006591 100%）；/*IE10+*/
背景：url（../Images/bg_image.png），线性渐变（到底部，#003953 0%，#004d6f 44%，#006591 100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#003953'，endColorstr='#006591'，GradientType=0）；/*IE6-9*/
保证金：0；
填充：0；
背景重复：不重复！重要；
背景位置：中上！重要；
颜色：#000；
利润率：0.70px；
字体系列：“Myriad Pro”；
}
.page.wrapper
{
宽度：100%；
}
.包装头
{
保证金：0自动；
宽度：1120px；
边缘顶部：135px；
}
.wrapper.main_内容
{
保证金：0自动；
宽度：1120px；
}
.login_块
{
背景：#fefefe；
宽度：324px；
边框：1px实心#8d8c8c；
边界半径：3px；
填充：30px0；
颜色：#8d8f8e；
利润上限：35px；
}
.包装页脚
{
高度：70像素；
保证金：0；
填充：30px 0 5px；
位置：绝对位置；
底部：0；
宽度：100%；
背景：白色；
-webkit盒阴影：插入1px 10px 11px 0px rgba（141141,1）；
-moz盒阴影：插入1px 10px 11px 0px rgba（141141,1）；
盒影：插入1px 10px 11px 0px rgba（141141,1）；
}
.footer_inner
{
宽度：1120px；
保证金：0自动；
}
.f_文本
{
填充顶部：15px；
字体系列：“Myriad Pro”；
位置：相对位置；
}
f_标志
{
位置：绝对位置；
右：0；
顶部：-46px；
}

既然元素的大小是固定的，那么就取“最宽”div，在本例中，它是头的1120px，如下所示

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

工作演示：

可能是演示或其他什么？或者是相关页面的链接？我的猜测是，这与固定宽度和绝对定位有关。你在所有地方都有固定宽度。如果你想要它，使用百分比。

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