0

我有一个简单的 css 示例，当显示水平滚动时，我无法理解我的一个 div 的行为。所以...当我的浏览器窗口需要显示水平滚动时（当窗口宽度小于我的 div“内容”宽度（1024px）时），我的 div“页脚”（具有相同的“内容”父级和 100%宽度），似乎在右侧有一个“额外的空白空间”。当我减小窗口的宽度时，这个空间会增加。关于我如何才能摆脱它的任何想法，或者它为什么会发生？谢谢！

这是我的代码：

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

1 回答 1

1

我将使用这是为您的内容 DIV 静态定义宽度并将页脚宽度定义为 100% 的副作用。

如果您注意到 100% 宽度部分的宽度始终对应于窗口的可见宽度，而静态定义的部分始终保持静态大小（如您所料）。当窗口大小增加时，100% 宽度部分会扩展以填充该大小。当窗口大小收缩时，它会收缩以仅填充该窗口。在窗口低于 1024 像素的最后一种情况下，静态 DIV 保持在 1024 并且动态 DIV 减小以适应窗口，因此您会在底部看到滚动条，因为您的静态内容超出了窗口的可见宽度。您滚动到一边，动态 div 保持相同的大小，即窗口的可见宽度，然后您会看到它旁边的空白。

一种解决方案是使 1024 部分具有百分比宽度，例如 80%，这样它会随着底部部分收缩和扩展。要么在 100% 部分设置 min-width:1024px 。

于 2010-04-16T19:50:30.753 回答