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

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

无标题文件
正文{margin:0；padding:0；背景色：#00F；}
div{margin:0；padding:0；背景色：#F00；}
span{font size:30px；}
你好
Hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语
当您缩小窗口并向右移动滚动条时，会看到红色div停止，并且不会填充浏览器的宽度，而只是填充屏幕的宽度


无论浏览器窗口是否缩小，如何使红色div填充宽度？

试试这个：

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标签中也有。您遇到的问题是紫色div比屏幕宽，因此它添加了底部滚动条。解决此问题的一种方法是将所有文本包装在块元素中（在本例中，我使用了

），并将其宽度设置为100%

CSS: HTML:

Hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语：英语口语。








当你缩小窗口并向右移动滚动条时，会看到红色的div停止，并且不会填充浏览器的witdh，只有屏幕的宽度。。。。。。。。。。。。




如果浏览器窗口缩小，如何让红色div填充宽度regarless？

---

嗯，一个简单的方法就是溢出：隐藏你的身体。。。但我想这并不完全是你想要的：我真的不清楚你想要实现什么。我编辑它是为了让它更清楚，我试图理解的是“你想解决什么问题”或“你只是在问”.红色div不是内容的宽度，如果没有滚动条，人们怎么能看到超出右侧的内容？你不能。你需要断字：断字；要做到这一点，红色div仍然不能填充被截断内容的宽度。查看红色div如何拉伸以匹配内容

word-break: break-word; 

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+ */
}

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