3

当我添加一个带有溢出自动的 div 时（所以我得到一个滚动条），文本在横幅底部被剪切（你必须滚动才能阅读其余部分）。

但是，现在的事情；我无法在<p>标签和 div 底部之间获得空闲空间。我已经尝试过边距、填充和边框。但我做错了。当我使用边距时，顶部，左侧和右侧都很好。但在底部它不起作用，只有当您滚动到底部时，您才能看到底部边距。

有人可以告诉我如何正确处理吗？我制作了一个 jsFiddle，这样你就可以看到哪里出了问题。

CSS

#t2_b2 {
    background: #000000;
    width: 500px;
    height: 100px;
    overflow-y:auto;
}

HTML

<div id="t2_b2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam neque, luctus et mattis at, ullamcorper quis orci. Nulla facilisi. Aliquam et quam sed augue euismod egestas. Pellentesque id varius ante. Cras eu dolor eros. In at ligula vel felis euismod sodales et eu metus. Maecenas molestie ultricies ipsum at eleifend. Quisque at odio massa. Aenean faucibus, urna non pulvinar gravida, nulla ligula laoreet tellus, a euismod ligula mi scelerisque lectus. Proin ultrices magna a lectus convallis ultrices. Nullam convallis sollicitudin lorem consequat sollicitudin. Fusce quis accumsan urna.</p></div>
4

3 回答 3

4

也许您想将滚动框包装在容器中 - 并为容器提供填充。

.container
{
   background: #000000;
   padding: 10px;  
   width: 500px;
}

小提琴

此外，我在滚动框的高度上添加了几个像素，以便最初不会剪切文本。

于 2013-06-05T12:32:51.553 回答
1

在段落的底部或仅在最后一个段落的底部添加更大的边距p:last-child

于 2013-06-05T12:31:03.920 回答
0

一个想法可能是在文本 div 下方添加一个 div，然后使用相对定位将其覆盖在文本 div 的底部。小提琴 

<div class="margin-bottom"></div>

.margin-bottom {
    position:relative;
    height: 5px;
    top: -5px;
    background-color:#ffffff;
    opacity:0.7; 
}
于 2013-06-05T12:57:25.090 回答