web-dev-qa-db-ja.com

コンテナdivのサイズを子の全高に変更するにはどうすればよいですか？

内容の変更に応じてサイズを変更する必要があるコンテナ要素があります。それは両方とも高さを変えることができる2つの絶対に配置されたdivを含みます。コンテナの高さを指定しないと、コンテナの後のすべてがコンテンツの下に表示されなくなります。

現在、私は次のことを行っていますが、それほど手間のかからない代替手段を見つけて喜んでいます。

（コンテナにはposition：relativeがあり、＃mainと#sidebarはposition：absoluteであり、＃sidebarの内容には位置が指定されていません）

css：

div#mapcontainer { position:relative; width:100%; height: 600px;  }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}

html：

<div id="container">
    <div id="main">variable height content here</div>
    <div id="sidebar">
       <div id="foo">...</div>
       <div id="bar">....</div>
       ...
    </div>
<div>

js：

fixHeights = function() {   
    var children_height = 0;  
    $('#sidebar'). children().each(function(){children_height += $(this).height();});
    $('#container').height(Math.max(children_height, $('#main').height()));
};
javascriptjquerydom
18
Ken

Divの高さは常に子の高さであるため、これは非常に奇妙な質問です。

コンテナdivにコンテンツをフローティングしていますか？子コンテンツをフロートすると、含まれているdivは同じように動作しなくなります。

コンテナdivの下部を超えて拡張するコンテンツをフローティングしている場合は、次のdivをコンテナdivの子の一番下に追加します。

<div style="clear:both;"></div>

それは子供たちがその上に浮かぶことを許さないでしょう、それでそれを含むdivをその最も高い子供の高さに強制します...

<div id="container">
  <div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
  <div id="static" style="margin-left:104px;">Lots of static stuff here</div>
  <div style="clear:both;"></div>
</div>

さて、なぜあなたが今のようにポジショニングをしているのかわかりませんが、デスクトップアプリケーションのように見えなければならないウェブサイトに対して同様のことをしました。 javascript以外にこれを行う方法はないと思います。 Htmlドキュメントは、厳密ではなく、流れるように設計されています。 javascriptを利用したい場合は、配置スタイルを手放し、フローティングdivとクリアdivを使用する必要があります。そうではありません それ 恐ろしい...

36
Will

コンテナdivをフローティングしている場合、「overflow：auto」も魔法のように機能します。特に、全体に関してIE hasLayout debacle

7
annakata

指定しませんでしたが、フローティング要素に問題があり、それらが含まれるコンテナを少なくとも最大のフローティング要素のサイズにする必要があると思います。次のCSSハックを試して、ブラウザにコンテナ要素のサイズをフローティング要素のサイズに再レンダリングさせる必要があります。

#wrapper:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

あなたが思いついたものと、これがうまくいくかどうかを教えてください。ブラウザに応じて、他にも多くのハックを試すことができます。

3
Nick Berardi

絶対位置を使用しないようにcssを変更してみます。 Firefoxでは、コメントに記載されているラッパートリックを使用して、mapcontainerを適切な高さにする必要があります。

div＃mapcontainer {clear：both;幅：100％;最小-高さ：600px; }

div＃main {float：left;マージン左：10px;幅：500px;高さ：400px; }

div＃sidebar {float：left; margin-top：10px; margin-right：10px;幅：155px;高さ：405px;}

1
Jason Christa

Overflow:visible;それがチケットです。 overflow:autoは、必要に応じてスクロールバーを作成します。

0
Greg