Chiều rộng toàn màn hình css

Và tôi muốn làm cho mỗi trong số chúng toàn màn hình của màn hình hiện tại (tôi có màn hình 1920/1080 khác có 1024/768, v. v. )

Tôi có mã CSS như thế này

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

Khi tôi tăng chiều cao từ kết quả 2000px lên 100% là

Bạn có ý tưởng làm thế nào để tôi có thể giải quyết vấn đề này không?

JSfiddle

CHỈNH SỬA

Tôi đã tìm thấy bài viết hay về điều đó. Xem ở đây nếu có ai cần nó

Hỏi ngày 11 tháng 8 năm 2014 lúc 14. 21 11 Tháng tám 2014 lúc 14. 21

Gsiradzegsiradze gsiradze

4. 40313 Huy hiệu vàng58 Huy hiệu bạc107 Huy hiệu đồng13 huy hiệu vàng58 huy hiệu bạc107 huy hiệu đồng

0

Bạn phải hủy kích thước của tài liệu (

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

7) cho chế độ xem (

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

8), sau đó chọn chiều cao và chiều rộng 100% cho mỗi phần- sau đó được tính toán liên quan đến điều này

Change your CSS for

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

7 and your CSS

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

1 to

bản demo

html, body {
    margin: 0;
    height:100%;
    width:100%;
    padding:0;
}

section {
    display: block;
    background: #CFF;
    height:100%;
    width:100%;
    padding: 60px;
    padding-left: 120px;
    box-sizing:border-box;
}

Add by way

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

2 vào CSS cho

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

1, mỗi phần sẽ duy trì chiều rộng 100% bao gồm phần đệm ứng dụng

Ghi chú

Bạn cũng có thể xem tỷ lệ phần trăm của các đơn vị, cụ thể là sử dụng các đơn vị

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

4 và ____05 (Chiều cao chế độ xem) và (chiều rộng chế độ xem) để khiến nội dung kéo dài nhằm lấp đầy toàn bộ lượng tương ứng của chế độ xem, trong đó 100 = 100%. Đây có thể là giải pháp thích hợp với các đơn vị %ngủ, tùy thuộc vào trình hỗ trợ duyệt cần thiết của bạn và không yêu cầu phần tử điện tử phải được lồng trong cha mẹ có cài đặt chiều cao/chiều rộng rõ ràng phần trăm khung nhìn . Đây có thể là giải pháp ưa thích so với các đơn vị% ẩn, tùy thuộc vào hỗ trợ trình duyệt được yêu cầu của bạn và không yêu cầu phần tử được lồng trong phần tử gốc với cài đặt chiều cao/chiều rộng rõ ràng

Đã trả lời ngày 11 tháng 8 năm 2014 lúc 14. 25 11 Tháng tám 2014 lúc 14. 25

SW4SW4 SW4

68. 6K20 Huy hiệu vàng129 Huy hiệu bạc135 Huy hiệu đồng20 huy hiệu vàng129 huy hiệu bạc135 huy hiệu đồng

1

Only used

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

0

Không cần thiết phải đặt các thuộc tính

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

6 và

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

7 cho các thẻ

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

8 và

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

9

Đã trả lời ngày 16 tháng 11 năm 2014 lúc 20. 18 16/11/2014 lúc 20. 18

NYXZNYXZ nyxz

6. 6609 Huy hiệu vàng52 Huy hiệu bạc67 Huy hiệu Đồng9 huy hiệu vàng52 huy hiệu bạc67 huy hiệu đồng

Đặt chiều cao trên cơ sở và các phần tử HTML thành 100%, sau đó sử dụng chiều cao. 100% on pages

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

5

Ví dụ về JSfiddle

Đã trả lời ngày 11 tháng 8 năm 2014 lúc 14. 25 11 Tháng tám 2014 lúc 14. 25

j08691j08691 j08691

68. 6K20 Huy hiệu vàng129 Huy hiệu bạc135 Huy hiệu đồng31 huy hiệu vàng254 huy hiệu bạc268 huy hiệu đồng

Only used

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

6

Không cần thiết phải đặt các thuộc tính

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

6 và

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

7 cho các thẻ

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

8 và

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

9.

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

1

Đã trả tiền ngày 16 tháng 11 năm 2014 lúc 20. 18

Đã trả lời ngày 11 tháng 8 năm 2014 lúc 14. 25 11 Tháng tám 2014 lúc 14. 25

68. 6K20 Huy hiệu vàng129 Huy hiệu bạc135 Huy hiệu đồng Jacob G

Only used. 3 huy hiệu vàng46 huy hiệu bạc65 huy hiệu đồng

Không cần thiết phải đặt các thuộc tính

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

6 và

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

7 cho các thẻ

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

8 và

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

9

Đã trả tiền ngày 16 tháng 11 năm 2014 lúc 20. 18

section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}

6

NYXZNYXZ

Đã trả lời ngày 11 tháng 8 năm 2014 lúc 14. 25 11 Tháng tám 2014 lúc 14. 25

68. 6K20 Huy hiệu vàng129 Huy hiệu bạc135 Huy hiệu đồng Sander Koedood

Only used. 5 huy hiệu vàng24 huy hiệu bạc34 huy hiệu đồng

Làm cách nào để tạo ra một phần chiếm toàn bộ màn hình trong HTML?

Nếu bạn muốn phần của mình bao gồm toàn bộ chế độ xem, hãy đặt chiều rộng của nó thành 100VW và chiều cao thành 100VH. 1VH bằng 1% toàn bộ chiều cao của màn hình (chiều cao của chế độ xem) trong khi 1VW bằng 1% chiều rộng của chế độ xem