javascript - 标题背景由于水平滚动条而被剪掉

Question

我正在为 iPad 和 iPhone 开发一个页面，其中我有一个标题，在最左 Angular 和最右 Angular 有按钮，内容位于标题下方。

header的CSS已经做好了，header的宽度会随着ipad的方向变化，iPhone会显示header左右两侧的所有按钮。

但是当我的内容超过一定宽度时，当我滚动到页面最右边的数据时，会出现水平滚动并且标题会被剪掉。

可以在这个 URL 中查看我遇到的问题示例:

http://www.kalee-eversole.com/

问题的副本:

http://www.tempestblog.com/2011/06/19/common-css-problem-header-background-cut-off-when-page-scrolled-horizontally/

这个问题有解决办法吗？欢迎提出宝贵建议。

Answer 1

被剪掉的不是 header 标签，而是 body，您将图像(模拟标题)作为背景。

问题似乎是您的 body 的宽度为 100%(浏览器宽度)，而 header 的宽度为 1024px(加上子元素负边距)，因此当浏览器小于 1024 时，正文仅跨越浏览器宽度，留下没有背景图像的额外滚动区域。

尝试将此添加到您的 body 标签的 CSS 中:

min-width:1192px;

(1024从header宽度+98+70从header内部元素左右负外边距)