gpt4 book ai didi

html - 无论浏览器窗口是否缩小,如何让 div 填充宽度?

转载 作者:搜寻专家 更新时间:2023-10-31 23:01:27 25 4
gpt4 key购买 nike

我无法让我的 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>

最佳答案

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

关于html - 无论浏览器窗口是否缩小,如何让 div 填充宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29653932/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com