Question

我有以下HTML和CSS：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body, div, html {
        margin: 0;
        padding: 0;
      }

      body {
        background: #727272;
      }

      #div1 {
        background: #F00;
        height: 50px;
      }

      #div2 {
        background: #F0F;
        height: 50px;
        width: 1500px;
      }
    </style>
  </head>
  <body>
    <div id="div1">
    </div>
    <div id="div2">
    </div>
  </body>
</html>

如果我将浏览器窗口缩小到小于1500px（div2的宽度），然后使用浏览器的水平滚动条向右滚动，div1的宽度仍然在浏览器窗口的宽度处被截断，并且不会像div2那样一直延伸到整个屏幕。

有没有办法让div1始终在整个屏幕上伸展，无论div2的宽度如何？
请注意，在我的实际代码中，div2的宽度始终在变化，因此我不能仅通过CSS为div1设置固定宽度。

谢谢。

Answer 1

试试这个。

  #div1 {
    background: #F00;
    height: 50px;
    width: 100%;
  }

Answer 2

在你的CSS尝试

display：block;

Answer 3

在这两个div周围放一个包装......

<div id="div0">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

然后设置包装器的样式并相应地划分

#div0 { display:table; }
#div1 {
    display:block;    
    width: 100%;
    background: #F00;
    height: 50px; }
#div2 {
    display: block;    
    background: #F0F;
    height: 50px;
    width: 1500px; }

http://jsfiddle.net/Ls7aj/

Answer 4

在正文上使用overflow:hidden，html，＃content可以解决问题。

将width:100%;添加到＃div1，您就可以了。

http://jsfiddle.net/tCN8H/

修改：将#Content更改为#container

如何让这个div填充文档的整个水平宽度，而不是浏览器窗口？

4 个答案: