[英]Repeat Pattern to 100% of the viewport
in CSS i made that code: 在CSS我做了那个代码:
body {
background-color:#f3f3f3;
max-width:1920px;
min-width:1024px;
margin:0 auto;
but to seperate the header from the content i would like to have a "bar" between them. 但要从内容中分隔标题我想在它们之间有一个“条”。
so i made: 所以我做了:
#zig {
max-width:100%;
background-image:url(../img/zig.png);
background-repeat:repeat-x;
height:25px;
but the Bar doesn't go "unlimited" it just repeat till it reaches "1920px" can i somehow change that? 但酒吧不会“无限制”它只是重复,直到达到“1920px”我可以以某种方式改变它吗? to put 放在
min-width:100%
didn't work 没用
max-width:1920px; /* REMOVE ME */
if you want something to be max-width 1920 than use a container child (of body) element. 如果你想要的东西是max-width 1920而不是使用容器子(body)元素。
what way you #zag DIV will spann the full width of html, body
which is dictated by the viewport width. 你怎么样#zag DIV将跨越html, body
的整个宽度html, body
这是由视口宽度决定的。
If #zag is a DIV (and it's not position absolute or fixed) than you need to set only it's height. 如果#zag是DIV(并且它不是绝对位置或固定位置),则只需要设置它的高度。 min-width:100%
is not needed since it already spans the full available width - being a block-level element. min-width:100%
不需要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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.