1

私のページの1つに、一種のツールチップスタイルの動作として使用しようとしている次の構造があります。「コンテナ」要素がクリックされるまで、「子」要素は非表示になります。私がやろうとしているのは、子を実際のコンテナーの上に配置することですが、私の問題は、子の高さが可変になる可能性があるため、正しく配置する方法がわかりません。

ここに私のコンセプトコードがあります:

<div id="container">
    <p>Some text</p>
    <div id="child">
        <p>Dynamic text so</p>
        <p>I never know the</p>
        <p>expected height</p>
    </div>
</div>


#container {
    width: 200px;
    height: 40px;
    border: 1px solid blue;
}

#child {
    position: absolute;
    bottom: 40px;
    border: 1px solid #red;
}

基本的に私がやりたいことは、 #child の下部を #container の上部に合わせて、コンテンツの値に応じてコンテナーが再構築されずに上向きに拡張できるようにすることです。ここでわかるように、これは期待される結果を完全には生成していません。

http://jsfiddle.net/tA9wr/

#child の下部の値を 130px に具体的に設定したためにのみ機能します。#child 内のコンテンツの高さがまったく変化すると、これは機能しなくなります。これは、 #child の高さが変化するときに発生したいことの簡単な MS Paint バージョンです。

http://i.imgur.com/WxOWRPp.png

私が望むものを達成する方法はありますか？

4

1 に答える 1

4

div を絶対的に (親に対して) 配置し、bottom プロパティを 100% (親の全高を意味する) に設定して、コンテナーの上部に配置する必要があります。

#container {
    margin-top: 100px;
    margin-left: 100px;
    width: 200px;
    height: 40px;
    background: blue;
    position: relative; /*set container to relative */
}

#child {
    width: 300px;
    background: red;
    position: absolute; /* position relative to container*/
    bottom: 100%; /*place bottom at top of container*/
}

これにより、#child上に拡張されます

デモフィドル

于 2013-08-16T00:40:09.277 に答える