Chiều rộng tối thiểu trong đổi kích thước cửa sổ

Question

Tôi có trang web có bố cục linh hoạt với chiều rộng 100%.

Khi tôi đổi kích thước cửa sổ trình duyệt, các thành phần trong trang chồng lên nhau.

Tôi sẽ tạo một hiệu ứng tương tự như trang web này http://bologna.bakeca.it/ khi cửa sổ nhỏ hơn kích thước dừng cố định chiều rộng cố định.

Answer 1

Bạn có thể đặt thuộc tính chiều rộng tối thiểu của CSS cho thẻ body. Kể từ khi khách sạn này không được hỗ trợ bởi IE6, bạn có thể viết như sau:

body{ 
    min-width:1000px;  /* Suppose you want minimum width of 1000px */ 
    width: auto !important; /* Firefox will set width as auto */ 
    width:1000px;   /* As IE6 ignores !important it will set width as 1000px; */ 
} 

Hoặc:

body{ 
    min-width:1000px; // Suppose you want minimum width of 1000px 
    _width: expression(document.body.clientWidth > 1000 ? "1000px" : "auto"); /* sets max-width for IE6 */ 
} 

Answer 2

Vâng, bạn có khá nhiều cho mình câu trả lời. Trong CSS của bạn, hãy cung cấp phần tử có chứa chiều rộng tối thiểu. Nếu bạn phải hỗ trợ IE6, bạn có thể sử dụng min-width-trick:

#container { 
    min-width:800px; 
    width: auto !important; 
    width:800px; 
} 

Điều đó có hiệu quả sẽ cung cấp cho bạn 800px chiều rộng tối thiểu trong IE6 và mọi trình duyệt cập nhật.