정렬 : 아래쪽 위로

Question

알 수없는 높이의 상대 컨테이너를 웹 사이트의 왼쪽 하단에 배치 할 수 있는지 궁금합니다. 그 안에있는 텍스트가 맨 아래에서 시작하여 위로 올라갑니다 (추가 할 때)? 이것은 브라우저가 일반적으로 (위에서 아래로, 수직으로) 렌더링하는 것과 정반대입니다.

예 : 이것은 잘 작동하지만 Unknown amount of text는 더 이상 사용자의 모니터의 높이보다 경우, 수직 스크롤이 표시되지 않는

<div class="container">Unknown amount of text</div> 
.container { max-width: 600px; left: 100px; bottom: 100px; position: absolute; } 

. position: relative;이 필요하지만이 컨테이너를 하단 왼쪽에 붙이면 어떤 방법으로 position: relative;이 나옵니까?

HTML/CSS 솔루션 만 찾고 있습니다 (가능하다면).

Answer 1

외부 div를 사용하여 조작 효과를 얻을 수 있습니다.

bg color을 모두 parent and child div으로 지정하면 효과가 맨 아래에 나타납니다.

당신이 하나를 시도 할 수 있습니다

html, body{height:100%} 
.wrap{ background:green; overflow:auto; height:100%} 
.container { max-width: 600px; background:green; position:absolute; bottom:0; } 

DEMO

Answer 2

HTML

<div class="wrap"> 
    <div class="container">Unknown amount of text</div> 
</div> 

CSS 내가이 일 개에 도움이 당신 단지 CSS의 변화라고 생각한다. 하단의 &은 하단 정렬을 설정하기 위해 여백 위쪽을 늘립니다.

.container { max-width: 600px; left:0; margin-top:200px; position: relative; }