标题背景由于水平滚动条而截断

时间:2012-12-16 17:33:23

标签: javascript jquery asp.net html css

我正在开发一个适用于iPad和iPhone的页面,其中我在最左边和最右边的角上有一个带按钮的标题,内容位于标题下方。

标题的CSS已经完成,标题的宽度随着ipad的定向而变化,iPhone显示标题左侧和右侧的所有按钮。

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

我可以在此网址中查看我遇到的问题示例:

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

问题的副本:

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

此问题有解决方法吗?我们非常欢迎任何有价值的建议。

1 个答案:

答案 0 :(得分:0)

header标记不是被剪切掉的,而是body,其中有一个图像(模拟标题)作为背景。

问题似乎是,body的宽度为100%(浏览器宽度),而标题的宽度为1024px(加上子元素为负边距),所以当浏览器小于1024,主体仅跨越浏览器宽度,留下额外的滚动区域,没有背景图像。

尝试将此添加到正文标记的CSS中:

min-width:1192px;

(标题宽度为1024 +标题内部元素左侧和右侧负边距为98 + 70)