스크롤 div에서 하단 텍스트가 잘리지 않음

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

그냥 마지막에 스크롤 박스를 컨테이너에 랩핑하고 컨테이너 패딩을 지정합니다. 처음에 텍스트가 절단되지 않도록

FIDDLE

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

또한 저는 스크롤 박스의 높이에 몇 픽셀을 추가했다.

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; 
}