Tôi đã đánh dấu một tweet cách đây vài tháng, vì đó là một thủ thuật CSS chân chính và đó là thứ chúng tôi yêu thích ở đây
Vấn đề là. làm cách nào để chúng tôi tạo vùng chứa có chiều rộng đầy đủ của trình duyệt khi chúng tôi ở bên trong cha mẹ có chiều rộng giới hạn?
Điểm khởi đầu
Chúng tôi muốn kéo dài nó rộng chính xác bằng cửa sổ trình duyệt
Đây là một số đánh dấu giả định tối thiểu
Stuff.
cân nhắc
Nếu chúng tôi có thể sử dụng định vị tuyệt đối, chúng tôi có thể đặt vùng chứa ở vị trí
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%;
}
6 và 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%;
}
7 – nhưng chúng tôi không thể, vì chúng tôi muốn vùng chứa tiếp tục lưu chuyểnChúng ta không thể áp dụng một số lề âm cho mỗi bên và kéo nó ra ngoài sao?
Với % chiều rộng đã biết
Giả sử vùng chứa chính rộng 60% và được căn giữa. Điều đó có nghĩa là có 20% chiều rộng ở hai bên của nó. Nhưng lề được tính dựa trên phần tử gốc, do đó, để kéo nó sang 20% bên trái của cửa sổ trình duyệt, bạn cần 1/3 chiều rộng của phần tử gốc, 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 cha mẹ không phải% đã biết
Trong hầu hết các trường hợp khác, chúng tôi không có đủ thông tin để biết chính xác khoảng cách để kéo vùng chứa có chiều rộng đầy đủ ra ngoài với lợi nhuận â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 mà chúng tôi muốn “kéo” sang trái và 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 cửa sổ chính. [Giả sử cha mẹ là trung tâm. ]
Vì vậy, cha mẹ của chúng ta 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ó cảm giác hơi đỏ [tôi. e. điều 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 gói gọn trong 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 điều 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%;
}
0 để có được phạm vi bảo hiểm đầy đủ đóNếu nó ít uốn não hơn, bạn có thể gặp may khi giảm xuống
@media [min-width: $max-width] {
.full-width {
margin-left: calc[50% - 50vw];
margin-right: calc[50% - 50vw];
}
}
Dịch
Vì hoạt ảnh [có thể] không liên quan ở đây, nên có lẽ không quá cần thiết, nhưng thay vào đó, bạn có thể kéo vùng chứa trở lại cạnh bằng các biến đổi
@media [min-width: 40em] {
.full-width {
width: 100vw;
transform: translateX[calc[[40em - 100vw]/2]];
}
}
@support[]
Ý tưởng trên được lấy từ Pen của Brandon Mathis nơi anh ấy kết hợp ý tưởng đó với việc gói gọn 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%;
}
1Ý tưởng ở đây là không điều nào trong số này áp dụng được 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 lên trên hành vi này trong CSS và để hành vi này ghi đè lên hành vi đó nếu có thể
Có vẻ là một ý tưởng hay, nhưng trong thử nghiệm của tôi, chỉ có Firefox làm đúng. Chrome đôi khi sẽ áp dụng truy vấn phương tiện không chính xác khi không được phép [ảnh chụp màn hình]. [Tôi nói “đôi khi” vì có vẻ như việc vẽ lại sẽ “sửa chữa” nó, chỉ để không áp dụng truy vấn phương tiện theo hướng khác. ] Edge dường như cũng không áp dụng các quy tắc truy vấn phương tiện [ảnh chụp màn hình]. Có thể các quy tắc @ lồng nhau có một chút lỗi
Không cần calc[]
Sven Wolfermann đã tiếp nối ý tưởng của Jon Neal với một biến thể thông minh 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 vùng chứa đến chính giữa cửa sổ trình duyệt bằng
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%;
}
2, sau đó kéo nó trở lại cạnh trái với lề 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%;
}
3 âmRất thông minh. Bằng cách này, bạn hoàn toàn không cần bất kỳ thông tin nào về chiều rộng gốc. 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%;
}
4 đều yêu cầu phụ huynh phải căn giữa chính xác trong trình duyệtBạ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%;
}
5 và 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%;
}
6? Tôi sẽ đặt một nhánh 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 khung nhìn đầy đủ của Bút [vùng chứa] bên trong bài viết của Chris Coyier [@chriscoyier] trên CodePen