không kéo dài toàn bộ chiều rộng trang

Trên this page, tôi có nền 2 tông màu. Cấu trúc của trang là:không kéo dài toàn bộ chiều rộng trang

<body> 
    <div id="upbg"/> 
    <div id="container"/> 
</body

Nền này có thể đạt được bằng cách thêm hình nền tối lên và hình nền sáng hơn trên cơ thể. Các css cho upbg là:

#upbg { 
    background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0; 
    height: 275px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

Nếu bạn thực hiện các cửa sổ trình duyệt rất hẹp như vậy mà thanh cuộn xuất hiện, sau đó nếu bạn di chuyển qua bên phải bạn sẽ nhận thấy rằng hình ảnh nền của upbg không lấp đầy toàn bộ chiều rộng của trang.

Tôi đoán rằng điều này là do 'chiều rộng: 100%' có nghĩa là chiều rộng của cửa sổ trình duyệt, chứ không phải toàn bộ chiều rộng của trang, có cách nào để sửa lỗi này không?

Cảm ơn, Don

Nguồn

2009-03-14 Dónal

Tôi đoán là điều này là bởi vì 'width: 100%' có nghĩa là chiều rộng của cửa sổ trình duyệt, chứ không phải là toàn bộ chiều rộng của trang, là có một cách để khắc phục sự cố này?

100% có nghĩa là nó sẽ được rộng như các yếu tố phụ huynh nó là vị trí tương ứng với (trong trường hợp này, body, chiều rộng trong số đó sẽ được dựa trên chiều rộng của mẹ, html). Mà sẽ được rộng như cửa sổ trình duyệt, trừ khi bạn chỉ định khác.

Vấn đề là, bạn có một đứa trẻ của body mà có thể rộng hơn body: cả hai #container và #footer được theo kiểu như vậy mà họ sẽ luôn luôn có ít nhất 1026px rộng. Điều này không mở rộng các phần tử cha của chúng, vì chúng ta đã thiết lập rằng các phần tử đó sẽ rộng bằng cửa sổ trình duyệt; thay vào đó, họ tràn cha mẹ của họ. Phản hồi mặc định cho điều này là để hiển thị các thanh cuộn để bạn có thể cuộn và xem nội dung bị tràn; nếu bạn đã thêm kiểu overflow:hidden vào html hoặc body, bạn sẽ thấy nội dung và chân trang của bạn được cắt bớt theo kích thước của cửa sổ trình duyệt và không có thanh cuộn nào được hiển thị.

Có một vài giải pháp dễ dàng như thế này:

BọC# content và #footer trong #upbg thay vì trước đó với nó. Sau đó loại bỏ các kiểu hiện có và tạo kiểu như sau: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; Điều này hoàn thành hai điều: bạn không còn chỉ định chiều rộng cho #upbg, do đó cho phép nó đủ rộng để bao bọc các con mới của nó, và nó cho phép bạn thoát của rất nhiều kiểu dáng không cần thiết bây giờ (bạn sẽ muốn xóa phần đệm bạn đã đặt cho body, cùng với một số kiểu trên #content). Cách khác,
Loại bỏ chiều rộng tối thiểu trên #content và #footer để chúng không bị tràn.

Nguồn

2009-03-14 03:55:04 Shog9

Câu trả lời hay, cảm ơn rất nhiều! Chỉ một câu hỏi, dòng đầu tiên của câu trả lời của bạn sẽ đọc: "100% có nghĩa là nó sẽ rộng bằng phần tử cha mẹ mà vị trí đó có liên quan. Trong trường hợp này, * body *." –

Uh, vâng. Tôi đã sửa chữa bản chỉnh sửa cuối cùng đó ... đã sửa chữa. – Shog9

chỉ đơn giản là bạn có thể sử dụng hình ảnh được định vị tuyệt đối với chiều rộng & chiều cao được đặt thành 100% được gói bằng thẻ bodyk nếu bạn có thể sử dụng toàn bộ nền. đặt chỉ mục z của các phần tử khác cao hơn nền được xem là hình ảnh.

 

<head> 
    ... 
    <style> 
    .virtualBg{ 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     z-index: 0; 
    } 
    </style> 
</head> 
<body> 
    <img src="path/to/bg.jpg" class="virtualBg" /> 
    ... 
</body>

nhưng tôi khuyên bạn nên sử dụng hình ảnh được cắt theo chiều dọc chứa cả tông màu và sau đó lặp lại-x nền cho phần tử nội dung.

Nguồn

2009-03-14 06:12:21 sepehr

không kéo dài toàn bộ chiều rộng trang

Trả lời

Các vấn đề liên quan