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来获得一些操作效果。

同时向bg color提供同一个parent and child div，然后它会产生最低效果。

<强> 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

Answer 2

你可以尝试这个，我认为这个可以帮到你只是改变了CSS。＆安培;在底部你只需增加边距顶部以设置底部对齐。

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

对齐：从下到上

2 个答案: