Question

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

但是，现在的事情;我无法在<p>标记和div底部之间获得可用空间。我尝试了边距，填充和边框..但我无法做到正确。当我使用保证金时，顶部，左侧和右侧都很好。但是在底部它不起作用，只有当你滚动到底部时，你才能看到底部边缘。

有人能告诉我如何做到对吗？我已经a 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>

Answer 1

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

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

FIDDLE

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

Answer 2

在段落的底部添加更大的边距，或者添加到p:last-child

的最后一个边距

Answer 3

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

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

.margin-bottom {
    position:relative;
    height: 5px;
    top: -5px;
    background-color:#ffffff;
    opacity:0.7; 
}

滚动div中的底部文本被截断，无法用边距修复它

3 个答案: