CSS 100% chiều rộng trên trình duyệt thay đổi kích thước

Xin chào tất cả Tôi đang cố gắng xây dựng bố cục bằng cách sử dụng CSS và tôi sắp gặp phải một vấn đề lạ. Thật kỳ lạ đối với tôi. Tôi có 3 divs a Tiêu đề, một Chân trang và một khu vực MainContent. Đầu trang và chân trang phải duy trì ở độ rộng không đổi 100% trong khi vùng MainContent phải được cố định ở vị trí trung tâm 996px; Điều này là tất cả tốt tuy nhiên khi tôi thay đổi kích thước cửa sổ trình duyệt đến một chiều rộng thấp hơn 996px và sau đó di chuyển nội dung của cửa sổ ngay 100% header và footer dường như được cắt ngắn và không còn 100%. Tôi đã gõ một kịch bản xương trần nhỏ để minh họa cho vấn đề (kiểu nội tuyến để giữ cho nó gọn nhẹ). Tôi biết tôi có thể thêm tràn: ẩn cho từng vùng chứa để tắt thanh cuộn khi cửa sổ được thay đổi kích thước. Tôi cũng đã viết một đoạn nhỏ của jQuery để buộc div trở lại chiều rộng, nếu chiều rộng giảm xuống dưới một chiều rộng nhất định. Tuy nhiên câu hỏi của tôi là xung quanh CSS, là có một CSS tinh chỉnh tốt hơn cho vấn đề này? Hoặc ai cũng có thể giải thích tại sao điều này xảy ra? Thankyou trước! DotsCCSS 100% chiều rộng trên trình duyệt thay đổi kích thước

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>div width test</title> 
</head> 
<body style="border:none; margin:0; padding:0; height:100%; width:100%"> 

    <div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div> 

    <div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto"> 
     <div id="inner-content"> 
      CONTENT OF THE PAGE HERE 
     </div> 
    </div> 
    <div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div> 
</body>

Nguồn

2010-09-27 DotsC

đăng mã css và html của bạn. –

Tôi không hoàn toàn rõ ràng về vấn đề của bạn, nhưng bạn có thể đặt min-width:996px; trên header và footer để giữ cho chúng ít nhất cũng rộng như nội dung.

Nguồn

2010-09-27 15:23:15 JamesMLV

Hãy thử điều này và vui lòng sử dụng loại tài liệu của HTML5.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <style type="text/css"> 
      body{margin:0;text-align:center;} 
      .header,.content,.footer{text-align:left;clear:both;margin:0 auto;} 
      .header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;} 
      .content{width:996px;height:512px;background-color:red;} 
     </style> 
     <title>Index</title> 
    </head> 
    <body> 
     <div class="header"> 
      Header stuff here 
     </div> 
     <div class="content"> 
      Page content stuff here 
     </div> 
     <div class="footer"> 
      and your footer... 
     </div> 
    </body> 
</html>

Nguồn

2010-09-27 16:07:54

FYI - Giải pháp này làm việc cho những gì tôi đang tìm kiếm Trong IE8/IE7. Thêm vào .header và .footer {width: 100%; chiều rộng tối thiểu: 970px}. Cảm ơn bạn +1 – Downpour046

CSS 100% chiều rộng trên trình duyệt thay đổi kích thước

Trả lời

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