Question

我在其中一个项目中遇到问题......

默认情况下，我的内容容器是100％但是当我放大时容器变得小于100％

首先img：

normal zoom

第二个img：

zoomed in

这是我的HTML文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="body_wrap">
            <header>
                <!-- content -->
            </header>

            <section class="main">
                <div class="content_wrapper">
                    <div class="content clearfix">
                        <!-- content -->
                    </div>
                </div>
            </section>
        </div>
    </body>
</html>

和CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none;
}
html { height: 100% }
body { font-size: 62.5%; line-height: 1 }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none }
a { text-decoration: none; }

::-moz-selection {background:#E92C6C; color:#fff; text-shadow: 0 1px rgba(0, 0, 0, .2);}
::selection {background:#E92C6C; color:#fff; text-shadow: 0 1px rgba(0, 0, 0, .2);}
*, textarea:focus, input:focus { outline: none; }
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden}

body {
    background: #FF0000 url('http://wallpapers.wallbase.cc/rozne/wallpaper-3027963.jpg') no-repeat 50% 0%;
    background-size: 100%;
    font-family: "Lato", Arial, "Lucida Grande", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased; 
}

header {
    position: relative;
    width: 960px;
    height: 700px;
    margin: 0 auto;
    padding: 0;
}

section.main {position: relative;width: 100%;background: #FFF;z-index: 5;min-height: 890px;}
section.main .content_wrapper {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    background: url('http://www.7image.ru/pics/1113/406472675.png') repeat-x;
    top: -10px;
}
section.main .content_wrapper .content {
    position: relative;
    width: 960px; 
    padding: 20px 0; 
    margin: 0 auto;
}

提前致谢

Answer 1

您已将header设置为width: 960px。这会导致页面在放大时水平扩展，并且屏幕宽度变得小于960px。将body-wrap div设置为overflow: hidden，以便header不再overflows body-wrap。

Answer 2

而不是使用

section.main .content_wrapper {
    width: 100%;
}

如何使用：

section.main .content_wrapper {
    width: inherit;
}

它帮助了我很多项目，也会帮助你。

放大？内容！= 100％

2 个答案:

放大 ？内容！= 100％

2 个答案:

放大？内容！= 100％