html - 如何使 高度等于其内容的组合高度

Question

我很难找到一种方法来使我页面中的像 div 这样的 block 的高度自动适合其内容的高度，所有这些 div 的宽度都是固定的 1000px，我很容易为它设置合适的高度它们以像素为单位，但内容的大小发生了很大变化，而且不断更改 div 高度也令人沮丧。

这是我的 div 的现有 css 样式

.start-block {
    width: 100%;
    padding: 10px;
    font-size: 14px;
}

这是 div 内部的样子:

<div style="float:right">
    <div class="start-description">
        <p>something</p>
    </div>
    <ul class="start-list">
        <li>stuff</li>
        <li>stuff</li>
    </ul>
</div>

Answer 1

您可以将 div 的高度设置为 100%。但是，这只是其 parent 容器的 100%。因此，在您的示例中，您还需要 html/body 标签为 100%，如下所示:

html {
    height: 100%;
}

body {
    height: 100%;
}

.start-block {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    height: 100%;
}