JSFiddle Demo

Question

我无法让我的div填满整个浏览器，它只会填满你看到的屏幕宽度。如果在缩小时滚动浏览器，它不会填满整个宽度。从表面看它看起来像是在工作但是如果你缩小浏览器并向右移动滚动条，你可以清楚地看到它有缺陷。我尝试过最小宽度，宽度100％，边距和填充0

http://jsfiddle.net/BdQvp/159/

    <html>
    <head>
    <title>Untitled Document</title>
    <style type="text/css">
    body { margin: 0; padding: 0;background-color:#00F;}
    div {margin: 0; padding: 0;background-color:#F00;}
    span{font-size:30px;}
    </style>
    </head>
    <body>
    <div>hello</div>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello.<br><br><br><br>
    <span>
watch as u shrink the window and move the scroll bar to the right that the red div stops and does not fill the width of the browser only the width of the screen............ <br>                                   <br>
    How do I get the red div to fill the width regardless if the browser window is shrunk?
    </span>
    </body>
    </html>

Answer 1

你遇到的问题是紫色div比屏幕宽，所以它添加了底部滚动条。解决此问题的一种方法是将所有文本包装在块元素中（在本例中我使用了<p>），并给它一个100％的宽度。

CSS：

p{
    width:100%;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

HTML：

<p>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello.
    <br>
    <br>
    <br>
    <br>
    <span>
        watch as u shrink the window and move the scrollbar to the right that the red div stops and does not fill the witdh of the browser only the width of the screen............ 
        <br>
        <br>
        How do I get the red div to fill the width regarless if the brower window is shrunk?
    </span>
</p>

JSFiddle Demo

Answer 2

试试这个：

http://jsfiddle.net/2nrLbbLu/

<强> CSS

body {
  margin: 0;
  padding: 0;
  background-color: #00F;
  overflow-x: hidden;
}
div {
  margin: 0;
  padding: 0;
  background-color: #F00;
}
span {
  font-size: 30px;
}

虽然我觉得这不是一个很好的解决方案，但只是一个基于现有代码的解决方案。

此外，您可以使用：

word-break: break-word;

也在你的身体标签中。

无论浏览器窗口是否缩小，如何获得div来填充宽度？

2 个答案:

CSS：

HTML：

JSFiddle Demo