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

html水平滚动

回答

相关问题