logo标签列表

如何使一个div在浏览器窗口缩小时能够填满整个宽度？

htmlcss
3
我无法让我的div填充整个浏览器的宽度，它只会填满你所见屏幕的宽度。如果你缩小浏览器并向右移动滚动条，你会清楚地看到它是有问题的。表面上看起来像是正常的，但实际上是有缺陷的。我尝试过使用min-width、width 100%、margin和padding 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>
1
我真的不清楚你想要实现什么。 - Paulie_D
我想要理解的是你试图解决什么问题，还是你只是在问而已。 - Paulie_D
红色的 div 不像它应该的那样是内容的宽度。 - user3174196
观察当您缩小窗口并将滚动条向右移动时，红色div停止并不会填充浏览器的宽度，只填充屏幕的宽度。<br> 如何让红色div填充整个宽度，无论浏览器窗口是否被缩小？ - user3174196
你不能让红色的 div 元素通过扩展溢出区域来达到 100% 的宽度。这并不是 width 的工作方式。你给出了一个在现实生活中几乎不可能出现的极端例子。如果你能向我们展示实际问题，我们也许可以提供帮助。 - Paulie_D
显示剩余3条评论
2个回答
5

你遇到的问题是紫色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

红色的 div 仍然没有填满其内容的宽度，被截断了。 - user3174196
请看红色div没有伸展以匹配内容的情况。 - user3174196
0

试试这个：

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;

在你的body标签中也要加上。

那么，如果没有滚动条，如何能够看到超出右侧的内容呢？ - j08691
你不能这样做。你需要使用"word-break: break-word;"来实现。 - Michael Giovanni Pumo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接