0

高さが固定されていない div 内で div の高さを拡張しようとしています。position:absolute拡張 div は他の div と対話する必要があるため、使用せずにこれを行う必要があります。

拡張された div の高さを固定することはできず、それが含まれる div も...

JSを使わずにCSSでこれを行う方法はありますか?

http://jsfiddle.net/q3Sze/2/

アップデート：

.extend明確にするために、この例では、div の高さをdiv の上から下に拡張しようとしてい.mainます。周囲の要素を押す必要があるため、.extend高さを固定したり、配置したりしないでください。absoluteさらに複雑なことに、div は流動的なサイト用であるため、.extenddiv 以外のすべての幅は 100% でな​​ければなりません。

高さを指定する.extendと、私が達成しようとしていることがわかりますが、高さを指定せずにそれを行う必要があります。

4

3 に答える 3

1

私はあなた.wrapperが100％の幅またはブラウザの画面を取っていると思います.and.mainまたはあなた.extendのために問題を作成しており、それは.containerに含まれて.containerいます。

.container{
     overflow:hidden;//very importantant to fulfill your criteria
     width:500px;//i gues you want have a fixed width of your container
     margin:3px;//if you want to
     word-break:break-all;//if you use fixed width for your container,because you are writing text with width 100% inside the container

}

編集: .main の下に add.extend したい場合は、編集に従って、div は次のようになります。

<div class="container">
    <div class="main"></dive>
     <div class="extended">&nbsp;</div>
</div>

今あなたのcssは次のようになります：

.main {
   width: 100%;
   //doont use height it will take automatic height
}
.extended {
   background: green;
   width: 150px;
   float: left;
   height: 100%;
   margin-top:40px;//create distance from main here,its better option
}
于 2013-07-11T13:07:49.223 に答える
1

同じ高さの 2 つの列を作成しようとしていると思います。HTML/CSS: Making two floating divs the same heightを参照してください。問題はここで説明されていますhttp://alistapart.com/article/fauxcolumns

于 2013-07-11T13:08:10.260 に答える
1

実際には、次のような単純なハックを実行できます。

.container {
    display:table-row;
}
.extended {
    display: table-cell;
    background: green;
    width: 150px;
}
.main {
    display:table-cell;
}

デモ

お役に立てれば

于 2013-07-11T16:33:53.300 に答える