Hướng dẫn how do i make html sections full screen? - làm cách nào để tạo các phần html toàn màn hình?

Tôi có năm phần:

Page 1
Page 2
Page 3
Page 4
Page 5

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 đến 100% là:

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

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:21Aug 11, 2014 at 14:21

Gsiradzegsiradzegsiradze

4.40313 Huy hiệu vàng58 Huy hiệu bạc107 Huy hiệu đồng13 gold badges58 silver badges107 bronze badges

0

Bạn cần phải ngầm định các kích thước của tài liệu (body) cho các chế độ xem (html), sau đó cho 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.

Thay đổi CSS của bạn cho body và

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

1 thành:

Demo fiddle

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

Bằng cách thêm

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 các đơn vị tỷ lệ phần trăm, cụ thể là sử dụng các đơn vị

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

4 và

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

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

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

4 and

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

5 (viewport height) and (viewport width) units to cause content to stretch to fill a proportionate amount of the viewport, where 100 = 100%. This is likely the preferred solution vs implicit % units, depending on your required browser support and does not require the element to be nested within a parent with explicit height/width settings

Đã trả lời ngày 11 tháng 8 năm 2014 lúc 14:25Aug 11, 2014 at 14:25

SW4SW4SW4

68.6K20 Huy hiệu vàng129 Huy hiệu bạc135 Huy hiệu đồng20 gold badges129 silver badges135 bronze badges

1

Chỉ dùng:

section {
    height:100vh;
    width: 100vw;
}

Không cần đặ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:18Nov 16, 2014 at 20:18

NYXZNYXZnyxz

6.6609 Huy hiệu vàng52 Huy hiệu bạc67 Huy hiệu Đồng9 gold badges52 silver badges67 bronze badges

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

html, body {
    height:100%;
}

Ví dụ về JSfiddle

Đã trả lời ngày 11 tháng 8 năm 2014 lúc 14:25Aug 11, 2014 at 14:25

j08691j08691j08691

68.6K20 Huy hiệu vàng129 Huy hiệu bạc135 Huy hiệu đồng31 gold badges254 silver badges268 bronze badges

Chỉ dùng:

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

Không cần đặ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:100%;
    padding: 60px;
    padding-left: 120px;
}

Đã trả lời 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:25Aug 11, 2014 at 14:25

68.6K20 Huy hiệu vàng129 Huy hiệu bạc135 Huy hiệu đồngJacob G

Chỉ dùng:3 gold badges46 silver badges65 bronze badges

Không cần đặ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

html {
        height: 100%;
        position: relative;
    }

    body {
        margin: 0;
        height: 100%;
        position: relative;
    }

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

NYXZNYXZ

Đã trả lời ngày 11 tháng 8 năm 2014 lúc 14:25Aug 11, 2014 at 14:25

68.6K20 Huy hiệu vàng129 Huy hiệu bạc135 Huy hiệu đồngSander Koedood

Chỉ dùng:5 gold badges24 silver badges34 bronze badges

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

Làm cách nào để làm cho nội dung phù hợp với màn hình trong HTML?

Làm cách nào để làm cho div của tôi chiều cao toàn bộ màn hình của tôi?