绝对位置与最小高度

Question

我的位置设置有问题。我有滚动类型的页面，每个框架（就像每个部分）都设置为 100% 宽度和高度。他们都有position: absolute。第一帧top: 0, left: 0, 第二帧top: 100%, left: 0; ETC... 但是当我需要更多文本时，超过 100% 高度时，我显然无法显示它，因为下一节...... 如何针对此问题正确设置位置？

CSS:

#about {
width: 100%;
height: 100%;
background:white; 
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}

HTML:

<div id="about" class="yourDivClass">
...
</div>

Answer 1

您可以使用 javascript/jQuery 在文档加载时动态设置每个 div 的顶部。不要在 CSS 中设置任何初始高度值，让它扩展到它应该占据的完整尺寸。

HTML:

<div class='yourDivClass' id="div1">
     ...
</div>
<div class='yourDivClass' id="div2">
     ...
</div>
<div class='yourDivClass' id="div3">
     ...
</div>
<div class='yourDivClass' id="div4">
     ...
</div>

Javascript/jQuery:

$(document).ready(function() {
    var totalHeight = 0;
    $(".yourDivClass").each(function() {
        $(this).css("top", totalHeight);
        var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
        $(this).css("height", height);
        totalHeight += height;
    });
});

看到这个jsFiddle。

绝对位置与最小高度

Position absolute vs min-height

css

height

position