Hướng dẫn how do you make a full width in css? - làm cách nào để bạn tạo chiều rộng đầy đủ trong css?

Sử dụng chiều rộng, chiều rộng tối đa và lề: tự động;

Như đã đề cập trong chương trước; Một phần tử cấp khối luôn chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải càng xa càng tốt).

Đặt width của phần tử cấp khối sẽ ngăn nó kéo dài ra các cạnh của container. Sau đó, bạn có thể đặt lề thành tự động, để tập trung theo chiều ngang phần tử trong thùng chứa của nó. Phần tử sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được phân tách bằng nhau giữa hai lề:

Phần tử này có chiều rộng 500px và lề được đặt thành tự động.

Lưu ý: Vấn đề với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử. Trình duyệt sau đó thêm một thanh cuộn ngang vào trang. The problem with the <div> above occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.

Thay vào đó, sử dụng ____1010, trong tình huống này, sẽ cải thiện việc xử lý các cửa sổ nhỏ của trình duyệt. Điều này rất quan trọng khi tạo một trang web có thể sử dụng trên các thiết bị nhỏ:

Phần tử này có chiều rộng tối đa 500px và lề được đặt thành tự động.

Mẹo: Thay đổi kích thước cửa sổ trình duyệt thành rộng dưới 500px, để thấy sự khác biệt giữa hai DIV! Resize the browser window to less than 500px wide, to see the difference between the two divs!

Dưới đây là một ví dụ về hai div ở trên:

Thí dụ

div.ex1 {& nbsp; & nbsp; width: 500px; & nbsp; & nbsp; lề: auto; & nbsp; & nbsp; biên giới: 3px solid #73ad21;}
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {& nbsp; chiều rộng tối đa: 500px; & nbsp; Biên độ: Auto; & nbsp; Biên giới: 3px rắn #73ad21;}
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

Hãy tự mình thử »

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Tôi đã đánh dấu một tweet một vài tháng trước, vì đó là một thủ thuật CSS bonafide và đó là những gì chúng tôi yêu thích ở đây.

Vấn đề là: Làm thế nào để chúng ta tạo một thùng chứa toàn bộ trình duyệt khi chúng ta ở bên trong một phụ huynh có chiều rộng giới hạn?how do we make a full-browser-width container when we’re inside a limited-width parent?

Điểm khởi đầu

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

Ở đây, 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>

Cân nhắc

Nếu chúng ta có thể sử dụng định vị tuyệt đối, chúng ta có thể đặt container ở mức

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%;
}

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%;
}

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

Với chiều rộng % đã biết

Hãy nói rằng container cha mẹ rộng 60% và tập trung. Điều đó có nghĩa là có chiều rộng 20% ​​ở hai bên của nó. Nhưng lề được tính toán dựa trên phần tử cha, vì vậy để kéo nó vào 20% cửa sổ Trình duyệt bên trái, bạn cần phải có 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%;
}

Với chiều rộng không được biết đến của cha mẹ

Trong hầu hết các trường hợp khác, chúng tôi chỉ không có đủ thông tin để biết chính xác bao xa để rút ra toàn bộ container với lề âm.

Chà, trừ khi…

Chúng tôi có thể sử dụng chiều rộng của cửa sổ trình duyệt trong toán học CSS của chúng tôi. Số tiền chúng tôi muốn để kéo theo 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 cha mẹ. (Giả sử cha mẹ là trung tâm.)The amount we want to “pull” to the left and right is half the width of the browser window plus half the width of the parent. (Assuming the parent is centered.)

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

.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 hơi đỏ (nghĩa là những gì xảy ra trên màn hình hẹp hơn?), Tất cả điều này có thể sẽ được bọc trong một truy vấn phương tiện khiến 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);
  }
}

Vì bản demo của chúng tôi là một hình ảnh, bạn cũng có thể làm một cái gì đó như

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%;
}

Nếu nó ít uốn cong não, bạn có thể gặp may mắn thành:

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

Dịch

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

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

@supports()

Ý tưởng trên được lấy từ một cây bút bởi Brandon Mathis, nơi anh kết hợp ý tưởng đó với việc gói tất cả trong

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%;
}

/* 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ẽ áp dụng nếu trình duyệt không hỗ trợ các đơn vị Viewport. Bằng cách đó, bạn có thể kéo hành vi dự phòng lên trên điều này trong CSS và để điều này ghi đè lên nếu nó có thể.

Có vẻ như là một ý tưởng tốt, nhưng trong thử nghiệm của tôi, Firefox đã có quyền này. Chrome đôi khi sẽ áp dụng không chính xác truy vấn truyền thông khi nó không được cho là (ảnh chụp màn hình). . Có thể lồng nhau @-rules là một chút lỗi.

Không cần calc ()

Sven Wolfermann đã theo dõi ý tưởng của 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 thùng chứa vào giữa cửa sổ trình duyệt với

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%;
}

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%;
}

Rất thông minh! Bằng cách này, bạn không cần bất kỳ thông tin nào về chiều rộng của cha mẹ. Xin lưu ý rằng cả phiên bản này và phiên bản

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%;
}

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%;
}

Bạn thậm chí có thể nghĩ: Tại sao phải bận tâm với

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%;
}

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%;
}

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

Xem hình ảnh chiều rộng của Pen Full Viewport (container) bên trong bài viết của Chris Coyier (@Chriscoyier) trên Codepen.