Full Width Containers in Limited Width Parents

Tôi đánh dấu một tweet một vài tháng trước đây.

Vấn đề là: làm thế nào để chúng ta làm cho một div fullwidth khi chúng ta đang ở trong một div giới hạn chiều rộng?

Starting Point

Chúng tôi muốn kéo dài nó chính xác như rộng như cửa sổ trình duyệt.

Dưới đây là một số đánh dấu giả định tối thiểu:

<!-- parent -->
<main>

  <p>Stuff.</p>

  <!-- container we want to be full width -->
  <figure class="full-width">
    <!-- could be whatever content -->
    <img src="dog.jpg" alt="">
  </figure>

</main>

Considerations

Nếu chúng ta có thể sử dụng định vị tuyệt đối, chúng ta có thể thiết lập các container để được ở left : 0; và width: 100%; - Nhưng chúng tôi không thể, bởi vì chúng tôi muốn các container để lại trong dòng chảy.

Chúng ta không thể áp dụng một số lợi nhuận tiêu cực để mỗi bên và kéo nó ra ngoài? Trong một số trường hợp, chúng tôi có thể!

With Known % Width

Hãy nói rằng các thùng phụ huynh đã rộng 60% và trung tâm. Điều đó có nghĩa là 20% chiều rộng ở hai bên của nó. Nhưng lợi nhuận được tính toán dựa trên các yếu tố phụ huynh, do đó, để kéo nó về bên trái 20% của cửa sổ trình duyệt, bạn cần 1/3 chiều rộng của cha mẹ, vì vậy ...

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

With Known Non-% Parent Width

Theo hầu hết các trường hợp khác, chúng ta không có đủ thông tin để biết chính xác có bao xa để kéo ra các thùng chứa đầy đủ chiều rộng với lợi nhuận tiêu cực.

Vâng, trừ khi ...

Chúng ta có thể sử dụng độ rộng của cửa sổ trình duyệt trong toán học CSS của chúng tôi. Số lượng chúng ta muốn "kéo" phía bên trái và bên phải là một nửa chiều rộng của cửa sổ trình duyệt cộng với một nửa chiều rộng của phụ huynh. (Giả sử các mẹ đang làm trung tâm.)

Vì vậy, nên mẹ của chúng tôi là 500px rộng:

.full-width {
  margin-left: calc(-100vw / 2 + 500px / 2);
  margin-right: calc(-100vw / 2 + 500px / 2);
}

Một chiều rộng cố định như thế cảm thấy một chút màu đỏ-flaggy (nghĩa là những gì xảy ra trên màn hình hẹp?), Tất cả điều này có thể sẽ được bọc trong một truy vấn phương tiện truyền thông mà làm cho nó chỉ áp dụng trên màn hình lớn hơn:

@media (min-width: 500px) {
  main {
    width: 500px;
    margin: 0 auto;
  }
  .full-width {
    margin-left: calc(-100vw / 2 + 500px / 2);
    margin-right: calc(-100vw / 2 + 500px / 2);
  }
}

Kể từ khi giới thiệu chúng tôi là một hình ảnh, bạn cũng có thể làm một cái gì đó giống như .full rộng img {width: 100%; } Quá, để có được bảo hiểm đầy đủ.

Nếu nó ít uốn não, bạn có thể có may mắn giảm tới:

@media (min-width: $max-width) {
  .full-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

Translate

Kể từ khi hình ảnh động (có thể) không liên quan ở đây, có lẽ không phải là siêu cần thiết, nhưng bạn có thể kéo container lại để cạnh với biến đổi thay.

@media (min-width: 40em) {
  .full-width {
    width: 100vw;
    transform: translateX(calc((40em - 100vw)/2));
  }
}

@supports()

Ý tưởng trên được chụp từ một Bút bởi Brandon Mathis nơi ông đã kết hợp ý tưởng với gói tất cả trong @supports.

/* See warning below */
@supports (width: 100vw) {
  .full-width {
    width: 100vw;
  }
  @media all and (min-width: 40rem) {
    .full-width {
       transform: translateX(calc((40rem - 100vw)/2));
    }
  }
}

Ý tưởng ở đây là không ai trong số này sẽ được áp dụng nếu trình duyệt không hỗ trợ các đơn vị khung nhìn. Bằng cách đó bạn có thể kéo hành vi dự phòng ở trên này trong CSS và để cho nó ghi đè lên nó nếu có thể.

Có vẻ như một ý tưởng tốt, nhưng trong thử nghiệm của tôi chỉ có Firefox có quyền này. Chrome sẽ đôi khi không đúng cách áp dụng các truy vấn phương tiện truyền thông khi nó không phải (ảnh chụp màn hình). (Tôi nói "đôi khi" như nó có vẻ giống như một vẽ lại sẽ "sửa chữa" nó, chỉ để không áp dụng các truy vấn phương tiện truyền thông theo một hướng khác.) Edge cũng dường như không áp dụng các quy tắc truy vấn phương tiện truyền thông ở tất cả (ảnh chụp màn hình). Có thể lồng @ -rules là một lỗi bit nào.

No calc() needed

Sven Wolfermann đã follow ý tưởng Jon Neal với một biến thể thông minh mà không cần calc():

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Ý tưởng ở đây là: đẩy các container để trung chính xác của cửa sổ trình duyệt với trái: 50%;, sau đó kéo nó trở lại để cạnh trái với lề -50vw tiêu cực.

Rất thông minh! Bằng cách này bạn không cần bất kỳ thông tin về chiều rộng mẹ cả. Do lưu ý rằng cả hai điều này và phiên bản calc () yêu cầu các phụ huynh đến được trung tâm chính xác trong trình duyệt.

Bạn thậm chí có thể nghĩ: tại sao bận tâm với quyền và margin-right? Đó là sự thật bạn không thực sự cần nó trên một trang web từ trái sang phải, nhưng nếu có bất kỳ cơ hội hướng: rtl; xảy ra, bạn sẽ cần những đặc tính đúng, do đó, có cả hai là chống đạn hơn.

Tôi sẽ đặt một ngã ba của phương pháp này ở đây, vì nó có vẻ hữu ích nhất.

Ví dụ trên: Codepen

Nguồn: https://css-tricks.com/full-width-containers-limited-width-parents/