重復模式到視口的100％

Question

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

沒用

Answer 1

max-width:1920px; /* REMOVE ME */

如果你想要的東西是max-width 1920而不是使用容器子（body）元素。

你怎么樣#zag DIV將跨越html, body的整個寬度html, body這是由視口寬度決定的。

如果#zag是DIV（並且它不是絕對位置或固定位置），則只需要設置它的高度。 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>