Chiều rộng khung nhìn khiến nền không hiển thị như mong đợi

Tôi gặp sự cố màu nền hoạt động không mong muốn khi chế độ xem được thu nhỏ thành kích thước nhỏ hơn kích thước được chỉ định cho một số thành phần của tôi. Trong khi các thanh cuộn xuất hiện chính xác thì nền không phải là những gì tôi mong đợi. Khi chế độ xem là lớn hoặc lớn hơn, hình nền hoạt động như dự định. Khi kiểm tra các phần tử trang với Firebug có vẻ như phần tử body không kéo dài ngay cả khi nội dung bên trong nó. Điều gì khiến cho hình nền hoạt động theo cách này?Chiều rộng khung nhìn khiến nền không hiển thị như mong đợi

Tôi đã cung cấp những gì tôi tin là html và CSS thích hợp, nhưng nếu tôi đã bỏ qua điều gì đó, vui lòng cho tôi biết.

thu nhỏ Viewport Ví dụ Broken Example

Phì Viewport Ví dụ Working Example

CSS

html 
{ 
    background: #A37C45; 
} 

body 
{ 
    background: 
     #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
} 

#container 
{ 
    width: 100%; 
} 

#header 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px; 
    overflow: hidden; 
} 

#main 
{ 
    width: 730px; 
    margin-top: 2px; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

#footer 
{ 
    background: 
     url("../images/backgrounds/grass.png") repeat-x scroll left top; 
    clear: both; 
    width: 100%; 
    overflow: hidden; 
    padding-top: 30px; 
    margin-top: 20px; 
} 

#footercontainer 
{ 
    width: 100%; 
    background-color: #A37C45; 
    margin-top: -1px; 
} 

#footercontent 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 25px; 
    overflow: hidden; 
}

HTML

<html> 
    <body> 
    <div id="container"> 
     <div id="header"> 
     </div> 
     <div id="main"> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footercontainer"> 
     <div id="footercontent"> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

Nguồn

2010-09-20 ahsteele

Lý do bạn đang nhìn thấy hành vi này là vì width: 100% yếu tố của bạn chỉ được lấy chiều rộng khung nhìn như số lượng nền mà họ cần để render.

Bạn có thể sửa lỗi bằng cách thêm min-width declaration vào CSS của phần tử body. Đơn giản chỉ cần đặt nó vào chiều rộng các yếu tố lồng lớn nhất:

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
}

Nguồn

2010-09-20 19:21:12 Pat

Đã phải thêm 10 pixel với 730px nhưng điều này hoàn toàn làm việc! – ahsteele

min-width không được hỗ trợ trong IE vì vậy sử dụng biểu

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 

    /* IE Version */ 
    width:expression(document.body.clientWidth < 730 ? "728px" : "auto"); 
}

Nguồn

2011-05-31 15:49:20

Tôi chưa thấy điều này không hoạt động trong IE. Có những phiên bản cụ thể mà tôi nên biết không? – ahsteele

Chiều rộng khung nhìn khiến nền không hiển thị như mong đợi

Trả lời

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