1

我有一个 10px 填充的容器。它有一个设定的高度和溢出：自动，以便包含长达 1000 个字符的“描述”。

这是没有溢出的样子......

在此处输入图像描述

这里有一个溢出：容器上的自动。

在此处输入图像描述

这会添加一个滚动条，这是所需的效果。然而，尽管容器底部有 10px 的内边距，但文本一直持续到容器边缘的最底部，这表明溢出时没有考虑内边距。我尝试添加更多填充，但正如预期的那样，它没有任何区别。

这是HTML...

<div class="journix-info-inner input-container shadow-bottom">
        <div class="info-header">
                <h2 class="journix-title">
                         <?php echo $row['title']; ?>
                </h2>
                <h3 class="journix-user">
                         by <?php echo $row['user_id']; ?>
                </h3>
         </div>
         <p class="info-content">
                <?php echo $row['description']; ?>
         </p>
</div>

这是CSS...

.journix-info-inner {
    margin-right:310px;
    max-height:360px;
    overflow:auto;
    padding:10px;
}

此屏幕截图显示了填充以及文本如何与底部 10 像素的填充重叠。

在此处输入图像描述

4

2 回答 2

2

我的建议是在容器内的文本周围设置一个 <section> 或 <article> 元素。您可以添加您选择的类，然后将溢出和最大高度属性移动到所述元素。然后，您将能够使用边距代替填充来保持底部的空白：

.description {
    max-height: 360px;
    overflow: auto;
    margin: 10px;
}

实践中的例子

如果您选择将标题/副标题留在此嵌套元素之外，则此方法将具有额外的好处，即在您滚动时将标题和副标题保持在适当的位置:-)

于 2013-04-29T17:56:44.217 回答
0

您可以尝试包含将box-sizing填充和边框限制为元素宽度和高度的属性。

.test {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
于 2013-04-29T17:43:08.937 回答