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

概述此站点是全宽度的,并且适应浏览器窗口的大小.但是,一旦浏览器窗口小于显示的内容,一旦向右滚动,标题就会被切断. 默认宽度100％似乎只适用于浏览器窗口的宽度,而不是页面的宽度！同样似乎也适用于垂直轴. 例 #title{ height: 50px; color: white; background-color: #404040;}#content{ width: 800px 此站点是全宽度的,并且适应浏览器窗口的大小.但是,一旦浏览器窗口小于显示的内容,一旦向右滚动,标题就会被切断.

默认宽度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(菜单和标题)拉伸和背景颜色.

总结

以上是内存溢出为你收集整理的html – CSS宽度100％仅限于浏览器窗口(它不会扩展到右侧滚动区域)全部内容，希望文章能够帮你解决html – CSS宽度100％仅限于浏览器窗口(它不会扩展到右侧滚动区域)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。