Hướng dẫn css break out of container - css thoát ra khỏi vùng chứa

Tôi muốn nó hoạt động như nó trong luồng của trang, nhưng mở rộng toàn bộ chiều rộng của cửa sổ.

hỏi ngày 30 tháng 7 năm 2012 lúc 14:19Jul 30, 2012 at 14:19

ShpigfordshpigfordShpigford

24.1K55 Huy hiệu vàng157 Huy hiệu bạc246 Huy hiệu đồng55 gold badges157 silver badges246 bronze badges

Một ý tưởng khác, trong các trình duyệt hiện đại chỉ kéo dài ____1010 đến chiều rộng của cửa sổ trình duyệt:

body, html {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

div {
  padding:0.5em;
}

.container {
  width:300px;
  background-color:rgba(255,255,0,0.5);
  margin:auto;
}

.breakout {
  margin:1em -100%; /* old browsers fallback */
  margin:1em calc(50% - 50vw);
  background-color:rgba(255,0,255,0.5)
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  

    Break out of container
  

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

EDIT: Một và duy nhất Chris Coyier giải thích các thùng chứa đầy đủ ở cha mẹ có chiều rộng hạn chế, có phần tương tự. The one and only Chris Coyier explains Full Width Containers in Limited Width Parents, which is somewhat similiar.

Đã trả lời ngày 22 tháng 6 năm 2016 lúc 9:42Jun 22, 2016 at 9:42

fboesfboesfboes

2.05914 Huy hiệu bạc16 Huy hiệu đồng14 silver badges16 bronze badges

5

Có lẽ http://jsfiddle.net/syv9g/1/?

.wrapper {
    width:300px;
    margin:0 auto;
    background:yellow;
}
.break {
    text-align:center;
    font-weight:bold;
    background:rgba(255,0,0, 0.5);
    margin-left:-100%;
    margin-right:-100%;
}

    
Ipsum Dapibus Pellentesque Pharetra
    
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
    
This should be full width
    
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    
This should be full width
    
Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla.
    
Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.

fboes

2.05914 Huy hiệu bạc16 Huy hiệu đồng14 silver badges16 bronze badges

Có lẽ http://jsfiddle.net/syv9g/1/?Jul 30, 2012 at 14:28

voodoo417voodoo417voodoo417

fboes3 gold badges34 silver badges39 bronze badges

10

Đã trả lời ngày 30 tháng 7 năm 2012 lúc 14:28

11.7K3 Huy hiệu vàng34 Huy hiệu bạc39 Huy hiệu đồngJul 30, 2012 at 14:26

Bạn thực sự không thể làm cho nó thoát ra khỏi Div bao bọc, nhưng bạn có thể mô phỏng hiệu ứng tương tự này bằng cách có phần bao bọc là toàn bộ chiều rộng của trang và bằng cách gói các yếu tố khác trên trang đó không được cho là Div "phá vỡ" của bạn bên trong một div có nền màu vàng và chiều rộng 300px.Zachary Kniebel

Đã trả lời ngày 30 tháng 7 năm 2012 lúc 14:263 gold badges28 silver badges52 bronze badges

3

Zachary Kniebelzachary Kniebel

.wrapper {
    width:300px;
    margin:0 auto;
}
.break {
    width: 600px;
    margin-left:-150px;
}

4.6863 huy hiệu vàng28 Huy hiệu bạc52 Huy hiệu đồng

Bạn có thể sử dụng lề tiêu cực để đạt được điều này.

Vấn đề duy nhất là bạn sẽ cần chỉ định chiều rộng của cả hai yếu tố.Jul 30, 2012 at 14:29

smilly92smilly92smilly92

Chỉnh sửa: Giải pháp của Voodoo417 sẽ tốt hơn ...1 gold badge23 silver badges43 bronze badges

Đã trả lời ngày 30 tháng 7 năm 2012 lúc 14:29

2.3751 Huy hiệu vàng23 Huy hiệu bạc43 Huy hiệu đồng

Xây dựng trên đầu giải pháp của Voodoo417 chỉ bằng cách thêm một trình bao bọc thứ hai và một số sửa đổi nhỏ Điều này có thể được thực hiện đúng cách:

http://jsfiddle.net/v53vv78d/2/

fboes

2.05914 Huy hiệu bạc16 Huy hiệu đồng14 silver badges16 bronze badges

Có lẽ http://jsfiddle.net/syv9g/1/?Sep 3, 2014 at 22:37

fboeskraftner

Đã trả lời ngày 30 tháng 7 năm 2012 lúc 14:282 silver badges18 bronze badges

11.7K3 Huy hiệu vàng34 Huy hiệu bạc39 Huy hiệu đồng

.wrapper {
    width:300px;
    margin:0 auto;
    background:yellow;
}
.break {
    text-align:center;
    font-weight:bold;
    background:rgba(255,0,0, 0.5);
    margin-left: calc((-100vw + 300px)*.5);
    margin-right: calc((-100vw + 300px)*.5);
}

https://jsfiddle.net/Lxnmr01h/

Bạn thực sự không thể làm cho nó thoát ra khỏi Div bao bọc, nhưng bạn có thể mô phỏng hiệu ứng tương tự này bằng cách có phần bao bọc là toàn bộ chiều rộng của trang và bằng cách gói các yếu tố khác trên trang đó không được cho là Div "phá vỡ" của bạn bên trong một div có nền màu vàng và chiều rộng 300px.Jan 6, 2021 at 0:27

2

Đã trả lời ngày 30 tháng 7 năm 2012 lúc 14:26

Zachary Kniebelzachary KniebelAug 5 at 8:49