html - 绝对定位100%高度滚动溢出问题

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;
}