Hướng dẫn css div not full width - css div không đủ chiều rộng

Đối với nhiều dự án của tôi, tôi đang thêm các CSS đặt lại sau. Sau đó, không còn vấn đề nữa =)

CSS

html, body, div, span, applet, object, iframe,
h2, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
h2, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none;
}

Làm cách nào để sửa chữa kích thước của một div?

Ví dụ về chiều cao và chiều rộng CSS.

Đặt chiều cao và chiều rộng của một phần tử: Div {chiều cao: 200px; Chiều rộng: 50%; ....

Đặt chiều cao và chiều rộng của một phần tử khác: Div {chiều cao: 100px; Chiều rộng: 500px; ....

 



     --- Full width container ---

Phần tử này có chiều cao 100 pixel và chiều rộng tối đa 500 pixel: div {Max-width: 500px; Chiều cao: 100px ;.

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

Một số lần chúng ta cần thêm một container có chiều rộng đầy đủ (kéo dài 100% cửa sổ) bên trong một thùng chứa có chiều rộng cố định và trung tâm căn chỉnh.

Mã sau giúp đạt được bố cục.

Protips liên quan

14 câu trả lời

Làm cách nào để sửa chữa kích thước của một div?

Làm cách nào để sửa chữa kích thước của một div?

.wrap { 
  width: 80%;
}

Ví dụ về chiều cao và chiều rộng CSS.

Đặt chiều cao và chiều rộng của một phần tử: Div {chiều cao: 200px; Chiều rộng: 50%; ....

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

Đặt chiều cao và chiều rộng của một phần tử khác: Div {chiều cao: 100px; Chiều rộng: 500px; ....

Phần tử này có chiều cao 100 pixel và chiều rộng tối đa 500 pixel: div {Max-width: 500px; Chiều cao: 100px ;.

Lưu ý rằng width áp dụng cho tất cả các yếu tố ngoại trừ các phần tử không được sao chép hoặc nội tuyến, các hàng bảng và các nhóm hàng (nghĩa là

 



     --- Full width container ---

3,

 



     --- Full width container ---

4 và

 



     --- Full width container ---

5). Dường như có một sự không phù hợp nhỏ theo cách HTML định nghĩa các yếu tố không được sao chép và cách CSS định nghĩa nó, nhưng chúng tôi đề cập đến nó theo cách CSS thực hiện: ; với thuộc tính ____ 17 & nbsp;

Đối với các phần tử được định vị hoàn toàn có khối chứa dựa trên phần tử thùng chứa khối, tỷ lệ phần trăm được tính toán theo chiều rộng của hộp đệm của phần tử đó.

Giá trị từ khóa

Với một số giá trị từ khóa đặc biệt, có thể xác định chiều rộng (và/hoặc chiều cao) theo nội dung của phần tử.

 



     --- Full width container ---

8

Giá trị

 



     --- Full width container ---

8 là thước đo nhỏ nhất phù hợp với nội dung của nó nếu tất cả các cơ hội bọc mềm trong hộp được thực hiện.soft wrap opportunities within the box were taken.

Ví dụ tốt nhất cho loại giá trị này là một phần tử

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

0 được viết đúng:

Một con mèo con đáng yêu mà chúng tôi có trong hình ảnh này được gói gọn trong một yếu tố hình. Làm thế nào thân yêu, hãy nhìn xem chú thích này là bao lâu! ________ 5What a lovely kitten we got there in this image which is encapsulated in a figure element. How dear, look how long this caption is!

Khi chúng tôi đã áp dụng một số kiểu cơ bản cho đánh dấu này, chúng tôi sẽ nhận được:

Nếu chúng ta muốn phần tử hình đó về cơ bản là kích thước của hình ảnh đó, vì vậy văn bản kết thúc ở các cạnh của hình ảnh. Chúng ta có thể nổi nó sang trái hoặc phải, bởi vì Float sẽ thể hiện cùng một loại hành vi thu nhỏ để phù hợp, nhưng nếu chúng ta muốn tập trung vào nó thì sao?

 



     --- Full width container ---

8 cho phép chúng tôi tập trung nó:

Bởi vì chúng tôi đã chỉ định

 



     --- Full width container ---

8 cho phần tử

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

0, nên nó có độ rộng tối thiểu có thể có khi thực hiện tất cả các cơ hội bọc mềm (như khoảng trống giữa các từ) để nội dung vẫn phù hợp với hộp.

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

4

Tài sản

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

4 đề cập đến số đo hẹp nhất mà một hộp có thể thực hiện trong khi phù hợp với nội dung của nó - nếu không có cơ hội bọc mềm trong phần tử được thực hiện.

Kiểm tra những gì xảy ra nếu chúng tôi áp dụng điều này cho bản demo mèo con/hình đơn giản của chúng tôi:

Bởi vì chú thích rất dài hơn hình ảnh rộng (nó không có bất kỳ cơ hội bọc mềm nào, giống như khoảng trống giữa các từ), nó có nghĩa là nó phải hiển thị chú thích trên một dòng, do đó

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

0 rộng như vậy hàng.

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

7

???. Một trong những bí ẩn lớn của cuộc sống.

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

8

Giá trị

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

8 gần tương đương với

.wrap { 
  width: 80%;
}

0 và

.wrap { 
  width: 80%;
}

1 trong hành vi, ngoại trừ nó hoạt động cho các chiều rộng không xác định.

Chẳng hạn, hãy để nói rằng chúng ta cần tập trung vào một điều hướng nội tuyến trên trang. Đặt cược tốt nhất của bạn sẽ là áp dụng

.wrap { 
  width: 80%;
}

2 cho

.wrap { 
  width: 80%;
}

3 và

.wrap { 
  width: 80%;
}

4 cho

.wrap { 
  width: 80%;
}

5. Điều này sẽ cung cấp cho bạn một cái gì đó như thế này:

Tuy nhiên, nền màu xanh (từ phần tử

.wrap { 
  width: 80%;
}

3) lan truyền trên toàn bộ tài liệu vì

.wrap { 
  width: 80%;
}

3 là phần tử cấp khối, có nghĩa là chiều rộng của nó chỉ bị hạn chế bởi phần tử chứa của nó. Điều gì sẽ xảy ra nếu chúng ta muốn có nền màu xanh sụp đổ xung quanh các mục danh sách?

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

8 để giải cứu!

Với

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

8 và

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

0, điều này hoạt động giống như một sự quyến rũ và chỉ có điều hướng có nền màu, không phải toàn bộ chiều rộng tài liệu.

Nếu bạn tham gia vào loại điều này, bạn sẽ rất vui khi biết công thức để xác định kích thước của độ dài hàm lượng phù hợp là:

fit-content = min(max-content, max(min-content, fill-available))

Đây là một giá trị khá không sử dụng, vì vậy nếu bạn đưa ra một trường hợp sử dụng tuyệt vời, hãy cho chúng tôi biết!

Hỗ trợ trình duyệt

I E	Bờ rìa	Firefox	Trình duyệt Chrome	Cuộc đi săn	Opera
Tất cả các	Tất cả các	Tất cả các	Tất cả các	Tất cả các	Tất cả các

Android chrome	Android Firefox	Trình duyệt Android	iOS safari	Opera Mobile
Tất cả các	Tất cả các	Tất cả các	Tất cả các	Tất cả các

Android chrome

Android Firefox

Tại sao div của tôi không có chiều rộng đầy đủ?

Làm cách nào để buộc một div đến chiều rộng đầy đủ?

Làm thế nào để bạn tạo ra một chiều rộng đầy đủ trong CSS?

Làm cách nào để sửa chữa kích thước của một div?