CSS宽度限制为浏览器窗口的100％（不会扩展到右侧滚动区域）
字节码77
该站点是全宽度的，并适应于浏览器窗口的大小。但是，一旦浏览器窗口小于显示的内容，则向右滚动时标题将被切断。
默认宽度100％似乎仅适用于浏览器窗口的宽度，而不适用于页面的宽度！似乎在垂直轴上也是如此。
例子
#title
{
height: 50px;
color: white;
background-color: #404040;
}
#content
{
width: 800px;
background-color: #f0f0f0;
}<div id="title">
TITLE
</div>
<div id="content">
CONTENT
</div>实际结果
这是页面向左滚动时的样子
（为了简单起见和保护隐私，对与问题无关的内容进行了审查。）
字节码77
在摆好姿势之后，我终于想出了一些办法。
body
{
position: absolute;
min-width: 100%;
min-height: 100%;
}
#menu-background
{
z-index: -1;
position: absolute;
width: 250px;
height: 100%;
background-color: #404040;
}
和菜单背景HTML
<div id="menu-background"></div>
<body>需要绝对定位，否则内容div的表将从内容div中溢出。而且，它需要min-width100％的a值才能涵盖这两种情况：窗口较小或较大。
菜单的工作方式相同，不同之处在于菜单是一个<div>跨整个页面的菜单。
该解决方案非常适合X和Y（菜单和标题）拉伸和背景颜色。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS宽度限制为浏览器窗口的100％（不会扩展到右侧滚动区域）
- 2
CSS div扩展到整个浏览器宽度
- 3
如何使用CSS将包装元素扩展到整个浏览器宽度？
- 4
如何使背景标题图片扩展到浏览器的整个宽度
- 5
如何使固定的导航栏扩展到浏览器的宽度？
- 6
如何将main div扩展到整个浏览器窗口高度？
- 7
浏览器数组大小限制为 100 个元素
- 8
跨浏览器解决方案，仅使用CSS限制水平滚动宽度
- 9
CSS-100％的高度不会扩展到内容
- 10
获取浏览器窗口宽度，包括滚动条
- 11
使div为浏览器窗口的100％宽度
- 12
元素宽度为PAGE的100％（非浏览器窗口）
- 13
CSS Grid包装器不会扩展到项目大小
- 14
将主体元素的宽度扩展到超出窗口的宽度
- 15
带有嵌入式脚本的SVG，可扩展到浏览器的可用空间
- 16
使用Bootstrap时文本不会到达浏览器窗口的右侧
- 17
当浏览器窗口宽度低于 400 像素时，主体宽度不是 100%
- 18
输入按钮不会扩展到CSS中设置的宽度吗？
- 19
网格元素未扩展到100％宽度
- 20
如何使内联块表扩展到100％的宽度？
- 21
Div不是浏览器宽度的100％
- 22
Div不是浏览器宽度的100％
- 23
向下滚动整个浏览器窗口
- 24
向下滚动整个浏览器窗口
- 25
当设置为width =“ 100％”时，Gmail App不会将表格扩展到其内容的宽度之外
- 26
设置为width =“ 100％”时，Gmail App不会将表格扩展到其内容的宽度之外
- 27
带溢出滚动的Div不会扩展到儿童的身高
- 28
滚动条不会扩展到全屏
- 29
如何使元素（而不是仅窗口）（浏览器）的页面和文档的宽度和高度均为100％？
我来说两句