Question

网站... http://dev.rapweb.co.uk/londonplace/research.htm

问题...当浏览器高度低到足以导致垂直滚动条时，向下滚动只显示空白区域，红色面板中文本的下半部分未显示。

尝试解决方案...红色面板上的溢出自动会导致页面滚动条。我认为这是由于绝对的定位。

其他想法......我意识到由于背景被设置为覆盖和底部对齐，可能无法实现我原先计划的内容，所以我调查了标题后面的文本滚动，但是这会产生问题当浏览器宽度足够低以产生水平滚动条时，因为文本可以滚动到红色面板和灰色区域之外，因为它们不再包含在其中。

非常感谢任何帮助。

Answer 1

这使得条带继续向下并向下延伸图像。

添加：

/* These 2 made the red strip not behave funny with <p> margins */

#redStripContent p:first-child {
    margin-top: 0;
    padding-top: 1em;
}

#redStripContent p:last-child {
    margin-bottom: 0;
    padding-bottom: 1em;
}

/* This extends the size of red strip */

#redStrip {
    position: relative; /* was absolute */
}

删除它：

/* This removes the fixed bottom on main image area */

#mainImageArea {
    bottom: 0px;
}

至于你在评论中提到的其他页面问题，我建议你使用min-height的组合：100％和负边距。尝试添加此例如：

#mainImageArea {
    min-height: 100%;
    margin-top: -110px;
    z-index: -1;
}

绝对定位100％高度滚动溢出问题

1 个答案: