在CSS中,我制作了代码:
body {
background-color:#f3f3f3;
max-width:1920px;
min-width:1024px;
margin:0 auto;
但为了将标题与内容分开,我希望在它们之间有一个"条"。
所以我做了:
#zig {
max-width:100%;
background-image:url(../img/zig.png);
background-repeat:repeat-x;
height:25px;
但酒吧并不是"无限"的,它只是重复,直到达到"1920px",我能以某种方式改变吗?放入
min-width:100%
不起作用
max-width:1920px; /* REMOVE ME */
如果您希望某个东西的最大宽度为1920,则使用容器子元素(主体)。
#zag DIV将以何种方式跨越由视口宽度决定的html, body
的整个宽度。
如果#zag是DIV(并且它不是绝对的或固定的位置),那么您只需要设置它的高度。不需要min-width:100%
,因为它已经跨越了整个可用宽度——作为块级元素。
html,body{height:100%;}
body{margin:0; font:16px/1 sans-serif;}
header, section, footer{
display:block;
margin: 0 auto;
max-width: 400px; /* you use 1920. 400 is for demo :) */
background:#eee;
}
.zag{
height: 50px;
background:#0fb;
}
<header>HEADER</header>
<div class="zag">ZAG</div>
<section>SECTION</section>
<div class="zag">ZAG</div>
<footer>FOOTER</footer>