html – CSS宽度100％仅限于浏览器窗口(它不会扩展到右侧滚动区域)

此站点是全宽度的,并且适应浏览器窗口的大小.但是,一旦浏览器窗口小于显示的内容,一旦向右滚动,标题就会被切断.

默认宽度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>

实际结果

这是页面向左滚动时的样子

(为了简单和隐私,与问题无关的内容会受到审查.)

解决方法

在摆弄了很多定位之后,我最终想出了一些东西.

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>

<身体GT;需要绝对定位,否则内容div的表将溢出内容div.此外,它需要100％的最小宽度来覆盖两种情况：窗口较小,或者较大.

菜单的工作方式相同,只是它是一个单独的< div>横跨整个页面.

此解决方案适用于X和Y(菜单和标题)拉伸和背景颜色.