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位置絕對可變高度以擴展容器

回答

相關問題