此站点是全宽度的,并且适应浏览器窗口的大小.但是,一旦浏览器窗口小于显示的内容,一旦向右滚动,标题就会被切断.
默认宽度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%的最小宽度来覆盖两种情况:窗口较小,或者较大.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。