html - 对齐 : Bottom to top

Question

我想知道是否可以将具有未知高度的相对容器放置在网站的左下角，以便其中的任何文本从底部开始向上(当我们添加它时)？这与浏览器通常呈现它的方式完全相反(从上到下，垂直)。

例子:

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

这很好用，但是如果 Unknown amount of text 比用户显示器的高度长，则不会出现垂直滚动条。它需要 position: relative; 然后有什么方法可以让这个容器通过 position: relative; 粘在左下角？

我只在寻找 HTML/CSS 解决方案(如果可能的话)。

Answer 1

您可以使用外部 div 来获得一些操作效果。

为 parent 和 child div 提供相同的 bg color 然后它给出从底部到顶部的效果。

HTML

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

CSS

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

DEMO