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

我已经搜索并查找了几个看起来类似于我的问题的帖子，但是我没有找到让我更接近解决方案的答案。CSS div位置绝对可变高度以扩展容器

所以我有点卡住DIV设置，我有一个环绕两个DIV的容器。第一个DIV将有一个标志，应始终位于左上角（定位于一个亲戚）。现在第二个DIV应该总是从容器的右下角开始，有一些可变的文本（绝对定位）。

如果第二个DIV中的文本很短，一切都很好，但是如果文本变得越来越大并且大于该徽标，文本将在容器顶部之外增长。

我的目标是容器会随着绝对DIV增长，如果文字变大。

我已经安装了一个小提琴向你展示我的问题。

[jsfiddle.net/jb3drnb0][1]

我在想什么？

来源

2015-04-03 Sunny

看看我的答案isit你想要什么？ – 2015-04-03 04:26:40

非常感谢您的所有建议。这让我对这个问题有了不同的看法。我试图漂浮，它很接近但并不完美。 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; }

来源

2015-04-03 16:36:23 Sunny

看看这个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>

来源

2015-04-03 04:24:09

因为您已设置的属性height：汽车。取而代之的是例如250像素，并检查它代码：

height : 250px;

替换：

height : auto;

来源

2015-04-03 04:24:47

如果文字长度很长，它会再次掉下来。高度必须是自动的 – 2015-04-03 04:27:56

然后对于某些浏览器，您应该添加clearfix技巧 – 2015-04-03 04:31:50

，但它可以在所有浏览器上顺利运行 – 2015-04-03 04:34:14

绝对定位的元素不会放弃其高度的父元素容器。所以用纯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的更多。

来源

2015-04-03 04:34:05 Sidd

实际上，使用clearfix技巧，你可以做到这一点与纯粹的css – 2015-04-03 04:37:26

我试过了，没有为我工作 - 但如果你有一个工作的例子或代码，我很想看到它并纠正我的答案！ – Sidd 2015-04-03 04:38:28

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

回答

相关问题