CSS - cách tràn từ div đến toàn bộ chiều rộng của màn hình

Question

Tôi có DIV chứa, mà tôi sử dụng như một phần của lưới phản hồi của mình. Nó mở rộng đến chiều rộng tối đa tôi cho phép là 1280px, sau đó lề xuất hiện cho các thiết bị lớn. Đây là CSS của tôi + một chút Less.

.container 
{ 
    margin-left:auto; 
    margin-right:auto; 
    max-width:1280px; 
    padding:0 30px; 
    width:100%; 

    &:extend(.clearfix all); 
} 

Tuy nhiên trong một số trường hợp, tôi muốn tràn sang một bên - giả sử tôi có hình nền hoặc màu cần phải có chiều rộng đầy đủ. Tôi không giỏi CSS - nhưng có thể đạt được những gì tôi muốn không?

Answer 1

Giải pháp hiển nhiên nhất là chỉ đóng hộp chứa ... có div chiều rộng đầy đủ của bạn rồi mở một vùng chứa mới. Tiêu đề 'vùng chứa' chỉ là một lớp ... không phải là yêu cầu tuyệt đối mà nó giữ tất cả mọi thứ cùng một lúc.

Trong trường hợp này, bạn áp dụng màu nền cho div chiều rộng đầy đủ và bạn không cần để áp dụng màu cho div nội bộ, bị hạn chế.

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    max-width: 80%; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
} 
 
.fullwidth { 
 
    background: orange; 
 
} 
 
header { 
 
    height: 50px; 
 
    background: #663399; 
 
} 
 
.mydiv { 
 
    /* background: orange; */ 
 
    min-height: 50px; 
 
} 
 
footer { 
 
    height: 50px; 
 
    background: #bada55; 
 
}

<div class="container"> 
 
    <header></header> 
 
</div> 
 
<div class="fullwidth"> 
 
    <div class="container"> 
 
    <div class="mydiv"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> 
 
    </div> 
 
    <div class="mydiv"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <footer></footer> 
 
</div>

Tuy nhiên, đối với một số họ thích một đơn tất cả bao gồm thùng chứa vì vậy nếu tất cả các bạn đang theo đuổi là một nền bạn có thể sử dụng một pseudo-yếu tố như sau:

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    overflow-x: hidden; 
 
} 
 
.container { 
 
    max-width: 80%; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
} 
 
header { 
 
    height: 50px; 
 
    background: #663399; 
 
} 
 
.mydiv { 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.mydiv:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 100vw; 
 
    background: orange; 
 
    z-index: -1; 
 
} 
 
footer { 
 
    height: 50px; 
 
    background: #bada55; 
 
}

<div class="container"> 
 
    <header></header> 
 
    <div class="mydiv"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> 
 
    </div> 
 
    <footer></footer> 
 
</div>

Hỗ trợ cho vw là IE9 + - Xem http://caniuse.com/#feat=viewport-units

Có những trường hợp nội dung thực tế được yêu cầu trong div rộng 100% và không thể mở/đóng theo ý muốn (có thể trang bị thêm thanh trượt).

Trong những trường hợp, nơi chiều cao của div mới được biết đến kỹ thuật tương tự có thể được sử dụng để định vị nó như là 100% khung nhìn rộng:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    overflow-x: hidden; 
 
} 
 
.container { 
 
    max-width: 80%; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
} 
 
header { 
 
    height: 50px; 
 
    background: #663399; 
 
} 
 
.mydiv { 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.myslider { 
 
    position: absolute; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 100vw; 
 
    background: orange; 
 
} 
 
footer { 
 
    height: 50px; 
 
    background: #bada55; 
 
}

<div class="container"> 
 
    <header></header> 
 
    <div class="mydiv"> 
 
    <div class="myslider"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> 
 
    </div> 
 
    </div> 
 
    <footer></footer> 
 
</div>

JSfiddle Demo

Lưu ý: có trường hợp trong đó 100vw có thể gây overflo w và một thanh cuộn ngang có thể xuất hiện. overflow-x:hidden trên <body> có thể tham dự vào điều đó..nó không phải là một vấn đề bởi vì mọi thứ khác vẫn còn bên trong container.

Answer 2

Tôi thấy điều này lừa siêu hữu ích bằng cách sử dụng vw trên margins (Source)

Ví dụ:

.inner-but-full { 
    margin-left: calc(-50vw + 50%); 
    margin-right: calc(-50vw + 50%); 
} 

Demo:

html,body { 
 
    overflow-x: hidden; /* Prevent scrollbar */ 
 
} 
 

 
.inner-but-full { 
 
    margin-left: calc(-50vw + 50%); 
 
    margin-right: calc(-50vw + 50%); 
 
    height: 50px; 
 
    background: rgba(28, 144, 243, 0.5); 
 
} 
 

 
.container { 
 
    width: 300px; 
 
    height: 180px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background: rgba(0, 0, 0, 0.5); 
 
}

<div class="container"> 
 
    <div class="inner-but-full"></div> 
 
</div>

Tôi có thể sử dụng:

http://caniuse.com/#feat=calc

http://caniuse.com/#feat=viewport-units

Answer 3

<meta charset="UTF-8"> 
 
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0; 
 
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style> 
 
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>