Giải thích tại sao lại phải để số px lớn đến vậy trong đoạn code css

#1

Chuyện là e đang học design nên có đi tham khảo 1 số theme có sẵn.
Có 1 đoạn css thế này

.wrapper {
    max-width: 1800px;
    margin: 0 auto;
    background: #fff;
   padding: 0 70px;
   position: relative;
}
header:before {
    position: absolute;
    height: 1000px;
    width: 100000px;
    left: 50%;
    margin-left: -50000px;
    bottom: 64px;
    content: "";
    background: #A96029;
}

Bác nào giải thích giúp e đoạn này với

height: 1000px;
width: 100000px;
margin-left: -50000px;

Tại sao lại phải để số px lớn đến vậy, trong khi e thử để số nhỏ hơn thì lại ko hoạt động ??

#2

help meeeeeeeeeeeeeeeee.

#3

Không biết trang của bạn là trang nào, nhưng với các width lớn như này là dùng cho các màn hình cỡ lớn (TV chẳng hạn), vì chẳng biết màn hình nó có kích thước là bao nhiêu nên cho một cái width thật lớn để cover tất cả các trường hợp sau này. Ở đây nó lấy vị trí tương đối, bắt đầu từ 50% của bao, margin - để phủ lên bao, như vậy sẽ còn 50000px được hiển thị từ gốc. Hi, mô tả hơi lởm, vì không rõ các CSS khác ra sao? Trang của bạn là gì?

Height thì như bình thường, cao 1000px, nếu kết hợp overflow:hidden thì nếu nhỏ hơn nó sẽ tự hide đi, còn không thì cho phép header nội dung cao tới 1000px (ở đây mình thấy đặt background màu nâu)

#4

E bị ra như vầy thì ẩn cái thanh scroll kiểu gì bác

Screenshot (4).png1917×221 1.17 KB

kiểu như toàn bộ trang đã nằm gọn trong màn hình, cuộn sang phải ko có gì hết, chỉ có cái background màu nâu thôi

#5

À, e tìm ra rồi, thêm overflow-x: hidden vào body. Thanks bác đã giúp đỡ :joy:

#6

Hi, đang định comment vậy. Mình cũng đoán là scrollbar nằm ngang, cho width lớn vậy để có thể scroll thoải mái từ -50000px sang 50000px. Còn vụ hiển thị thì cho overflow vào để cắt bớt đoạn dư.

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?