html水平滾動

我有一個簡單的css示例，我無法理解當顯示水平滾動時我的一個div的行爲。所以...當我的瀏覽器窗口需要顯示水平滾動（當窗口寬度小於我的div「內容」寬度（1024px））時，我的div「頁腳」（具有相同的「內容的」父母和100％寬度），似乎在右側會得到「額外的空白空間」。當我減小窗口的寬度時，這個空間會增長。任何關於如何讓它關閉的想法，或爲什麼會發生？謝謝！html水平滾動

繼承人我的代碼：

CSS：

<style type="text/css"> 

     html, body { 
      height: 100%; 
      width:100%; 
      font-family:"Arial Black", Gadget, sans-serif; 
      font-size:11px; 
      font-variant:normal; 
      } 

      * { 
      margin: 0; 
      } 

     .wrapper { 
      min-height: 100%; 
      height: auto !important; 
      height: 100%; 
      margin: 0 auto -4em; 
      } 

     #content{ 
      width:1024px; 
      margin:0px auto; 
      background-color:#990; 
      height:780px; 
     } 

     .footer, .push { 
      height: 4em; 
      width:100%; 
      } 

      #footer-content{ 
      height:10px; 
      background-color:#09F; 
      width:100%; 
      } 
     </style>

HTML：

<body> 
<div class="wrapper"> 
     <div id="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p> 
     </div> 
     <div class="push"></div> 
    </div> 
    <div class="footer" style="background-color:#900; width:100%;"> 
     <div id="footer-content"></div> 
    </div> 
</body>

來源

2010-04-16 mp.

我要去跟這個是有一個靜態定義寬度的副作用你內容DIV並將頁腳寬度定義爲100％。

如果您注意到100％寬度部分的寬度始終與窗口的可見寬度相對應，而靜態定義部分始終保持靜態大小（如您所期望的那樣）。當窗口尺寸增加時，100％寬度部分會擴大以填充該尺寸。當窗口大小收縮時，它會收縮以僅填充該窗口。在最後一種情況下，窗口低於1024px，靜態DIV保持在1024，動態DIV降低到適合窗口，所以你得到底部的滾動條，因爲你的靜態內容超出了窗口的可見寬度。您滾動到側面，動態div保持相同的大小，即窗口的可見寬度，然後您會看到旁邊有空白區域。

一個解決方案是使1024部分的寬度百分比，例如80％，這樣它就會收縮並擴展底部。無論是或100％部分設置最小寬度：1024px。

來源

2010-04-16 19:50:30 Harv

回答

相關問題