Được rồi, đầu tiên, đây là mẫu HTML:
Như bạn có thể thấy, trang này nằm bên dưới tiêu đề và hiển thị thông qua mã JS (ban đầu chúng không hiển thị).
Mọi thứ đều hoạt động tốt, vấn đề là trang được thay đổi kích thước theo chiều cao của màn hình và bỏ qua chiều cao của tiêu đề. Do đó, bạn có thể thấy thanh cuộn kéo dài ra ngoài viền màn hình.
+--------------------------+ ---------
| TIÊU ĐỀ |
|
*--------------------------* |
TRANG |
| nội dung | - KÍCH THƯỚC MÀN HÌNH
| nội dung #|
| nội dung #|
| nội dung #|
+--------------------------+ ---------
| nội dung #|
| nội dung #| # là thanh cuộn
*--------------------------*
Ngay cả khi trang không có nội dung, trang vẫn ở kích thước toàn màn hình.
CSS:
*, *:sau, *:trước {
-webkit-box-sizing: hộp viền;
-moz-box-sizing: hộp viền;
kích thước hộp: hộp viền;
}
tiêu đề {
màu nền: #fdc162;
phần đệm dưới cùng: 1em;
chiều cao: tự động;
}
.trang {
display: block;
position: absolute;
width: 100%;
chiều cao: 100%;
khả năng hiển thị: ẩn;
tràn: tự động;
-webkit-backface-khả năng hiển thị: ẩn;
-moz-backface-khả năng hiển thị: ẩn;
khả năng hiển thị mặt sau: ẩn;
}
Tại sao điều này xảy ra và làm cách nào tôi có thể thoát khỏi nó mà không cần JS?
trong lớp học của bạn .trang
中使用 tự động
thay vì chiều cao:100%
Và chiều rộng:100%
.
Về javascript - kích thước
Tôi là một lập trình viên xuất sắc, rất giỏi!