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