Question

我一直在尝试让页面在内容窗格的顶部显示标题，然后在下面显示可滚动的产品列表，以便始终显示产品范围的标题。我确信这是一件非常简单的事情 - 但无法弄清楚。

目前实际页面（不是下面给出代码的测试页面）工作正常，我将标题div设置为.content-container高度的5％，然后将可滚动div设置为申请top: 5%时，position: absolute为95％。

但是我想在标题div中放置一些链接到不同的页面（1,2,3等），如果它们比标题短，我想垂直居中，并扩展标题div以匹配高度标题或链接，以最小者为准。此外，我希望标题下方的div缩小，以便它不会低于内容div的底部，因为标题div变得更高。这一点的原因在于，对于可能会或可能不会对标题尺寸等感到满意的客户而言 - 因此标题div高度很容易改变。如此精确地指定高度意味着更改h1高度可能意味着对CSS文件进行了5次更改 - 这是我想要避免的。

内容窗格当前的高度固定为页面的80％，页眉和页脚各占10％，因此页面侧面没有滚动条，页眉/页脚是总是表现出来这是我想保留的。

在下面的代码中，.content-container是主内容窗格 - 它包含在另一个div中，该div使用页面宽度的50％的边距居中。 .test-div是包含标题的div。 .test-div-2尝试将div放在.test-div以下，希望我可以强制.test-div-3扩展到其''高度的100％但不再显示，并显示滚动条如果内容超过高度。

到目前为止，我有以下内容，但它并没有完全符合我的要求：

<div class="content-container">
    <div class="test-div">
        <h1 style="text-align: center;">Dogs</h1>
    </div>
    <div class="test-div-2">
         <div class="test-div-3">
              //Content here
         </div>
    </div>
</div>

这是css：

.content-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.test-div {
    position: relative;
    padding: 0;
    margin: 0;
}

.test-div-2 {
    position: relative;
    background-color: #CCCCCC;
}

.test-div-3 {
    max-height: 100%;
    background-color: #999999;
}

对此的任何帮助将不胜感激。如果可能的话，我想在没有使用JavaScript / jQuery的情况下实现这一点 - 只需要纯HTML / CSS解决方案！

Answer 1

试修复滚动div或任何块级元素的高度并添加overflow：scroll属性或overflow-y：scroll属性

样本将是

    .test-div-2
    {
        position: relative;
        background-color: #CCCCCC;
        overflow: scroll;
        height: 100px;
    }

    .test-div-3
    {
        max-height: 100%;
        background-color: #999999;
    }
</style>

<div class="content-container">
    <div class="test-div">
        <h1 style="text-align: center;">
            Dogs</h1>
        <div class="clear">
        </div>
    </div>
    <div class="test-div-2">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
            massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
            sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
            a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
            massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
            sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
            a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
            massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
            sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
            a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
        <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
        massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
        sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
        a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
        ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. </p>
    </div>

</div>

Answer 2

试试这个

.content-container
            {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                right: 0;
                bottom: 0;
                overflow: auto;
            }

.test-div
            {
                position: relative;
                padding: 0;
                margin: 0;
            }

.test-div-2
            {
                position: relative;
                background-color: #009933;
                max-height:100px;
            }

.test-div-3
            {
                max-height: inherit;
                background-color: #0064ea;
                overflow: scroll;
            }

工作实例 jsFiddle

溢出 - 我做错了什么？

2 个答案: