CSS在瀏覽器上的100％寬度調整

大家好我正在嘗試使用CSS來構建一個佈局，而且我會遇到一個奇怪的問題。對我來說很奇怪。我有3個div 標題，頁腳和主要內容區域。頁眉和頁腳必須保持100％的恆定寬度，而MainContent區域必須在996px處集中修復;這一切都很好，但是當我調整瀏覽器窗口的寬度低於996px，然後滾動窗口的內容時，100％的頁眉和頁腳似乎被截斷，不再是100％。我已經敲了一個簡單的腳本來說明問題（樣式內聯以保持緊湊）。我知道我可以添加overflow：隱藏到每個容器，以便在窗口大小調整時關閉滾動條。如果寬度低於一定寬度，我還寫了一小段jQuery來強制div的寬度爲。然而，我的問題是圍繞CSS，是否有更好的純CSS修復此問題？或者有人可以解釋爲什麼發生這種情況？提前謝謝！ DotsCCSS在瀏覽器上的100％寬度調整

<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>

來源

2010-09-27 DotsC

發佈您的CSS和HTML代碼。 – 2010-09-27 15:18:38

我不是你的問題完全清楚，但你可以設置頁眉和頁腳min-width:996px;至少寬讓他們的內容。

來源

2010-09-27 15:23:15 JamesMLV

試試這個，請使用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>

來源

2010-09-27 16:07:54

僅供參考 - 此解決方案適用於我在尋找的內容在IE8/IE7中。添加到.header和.footer {width：100％;最小寬度：970像素}。謝謝+1 – Downpour046 2012-09-05 14:28:41

CSS在瀏覽器上的100％寬度調整

回答

相關問題