Question

我搜索并查找了几个与我的问题类似的帖子，但是我没有找到让我更接近解决方案的答案。

所以我对DIV设置有点困惑，我有一个围绕两个DIV的Container。第一个DIV将有一个标志，应始终位于左上角（定位于一个亲戚）。现在第二个DIV应该总是从Container的右下角开始，有一些变量Text（定位一个绝对值）。

如果第二个DIV中的文本很短，一切都很好，但是如果文本变大并且比标识大，则文本将在容器顶部之外生长。

如果Text越来越大，我的目标是使用绝对DIV增长Container。

我已经设置了一个小小的小提示来向你展示我的问题。

[jsfiddle.net/jb3drnb0][1]

我错过了什么？

Answer 1

非常感谢你的所有建议。它让我对这个问题有了不同的看法。我尝试了浮动，它很接近，但并不完美。 Sidd对Javascript的建议最终让我尝试了CSS Calc函数，并使用带有宽度参数的Inline-Blocks，并使用text-align和vertical-align来实现我想要的效果。

所以这里有一个更新的fiddle给所有感兴趣的人。：）

.container { position: relative; height: auto; border: 1px solid #00f; overflow: visible; }

.left { display: inline-block; width: 160px; height: auto; vertical-align: top; }

.right { display: inline-block; height: auto; width: calc(100% - 170px); vertical-align: bottom; text-align: right; }

Answer 2

看看这个fiddle css：

.container {  height: auto; border: 1px solid #00f; overflow: visible; }

.left { float: left; height: auto; }

.right { float: right; bottom: 0px; right: 0px; padding-left: 160px; height: auto: }

html：

<div class="container">
    <div class="left">
        ******************<br/>
        **** TESTTEXT ***<br/>
        ******************
    </div>
    <div class="right">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div style="clear:both;"></div>
</div>

Answer 3

因为您已设置属性height：auto。用例如250px替换它并检查它代码：

height : 250px;

替换为：

height : auto;

Answer 4

绝对定位的元素不会将其高度赋予父元素容器。所以用纯CSS做这个是不可能的，因为你必须知道.left的宽度（给.right左边填充这个大小 - 这也需要浮动两个内部div）或者高度为.right（因此您可以将其指定给.container）。

但如果您可以选择使用Javascript，那么很容易做到：

    var ht = document.querySelector('.right').getBoundingClientRect().height;
    document.querySelector('.container').style.minHeight = (ht+10)+"px";

此处我在渲染后计算.right的高度，并为.container提供比其高10px的高度。

CSS div位置绝对可变高度以扩展容器

4 个答案: