html - 溢出-我在做什么错？

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

目前，在我将标题div设置为.content-container高度的5％，然后将可滚动div设置为95％的意义上，实际的页面（不是下面给出代码的测试页面）可以正常工作>，都应用了top: 5%。

但是，我想在标题div中放置一些指向不同页面的链接（1、2、3等），如果它们比标题短，我想将它们垂直居中，并扩展标题div以匹配标题的高度或链接，以最小者为准。此外，我希望标题下方的div缩小，以使标题div越高，它不会低于内容div的底部。这样做的目的是因为客户可能对标题大小等感到满意，也可能不满意，因此标题div的高度很容易改变。精确地指定高度意味着改变position: absolute高度可能意味着对CSS文件进行5次更改-我想避免这种情况。

内容窗格当前的高度固定为页面的80％，页眉和页脚分别位于页面顶部的10％，因此页面侧面没有滚动条，并且页眉/页脚始终显示。这是我要保留的东西。

在下面的代码中，h1是主要的内容窗格-包含在另一个div中，该div以页宽的50％作为空白。 .content-container是包含标题的div。 .test-div尝试将div放置在.test-div-2下方，希望我可以强制.test-div扩展到其高度的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解决方案！

最佳答案

尝试
固定滚动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>

关于html - 溢出-我在做什么错？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4517378/