5

私は簡単なdivセットアップを持っています：

<div id="container">
    <div id="title"><h4>Title</h4></div>
    <div id="content"></div>
</div>

#container要素は固定の高さに設定されます。利用可能なすべての高さを用意したい#contentのですが、これを行うためのクリーンなクロスブラウザーの方法が見つかりませんでした。CSSは次のとおりです。

div {
  width: 100%;
}
#container {
  height: 400px;
}
#content {
  height: 100%;
}

ただし、これにより、親と#content同じ高さに#containerなり、親からオーバーフローします。

実例はhttp://jsbin.com/amekah/2/editで見ることができます。

#contentdivを入力div要素（この例では）に追加するJavaScriptライブラリを作成している#containerので、親要素または子要素のいずれかのレイアウトをいじりすぎないように注意する必要があります。JavaScriptを使用して、使用可能な高さを動的に計算してもかまいません。

4

7 に答える 7

6

#contentオーバーフローの問題は、 divの100％宣言が原因で発生します。このプロパティを取り出します。

タイトルdivとオーバーラップしているときに#contentdivの高さを100％にしたい場合は、絶対位置を使用する必要があります。

#container {
  height: 400px;
  position: relative;
}
#content {
  top: 0;
  bottom: 0;
  position: absolute;
}
于 2012-12-26T15:27:38.373 に答える
6

Javascript を使えば驚くほど簡単です。私は現在、現在のプロジェクトでそのようなことをしています。

  1. コンテナーの高さを取得しますelem.offsetHeight。ここで、elem はオブジェクトへの JavaScript ポインターです。あなたの例では、これは次のようになります。

    var containerHeight = document.getElementById('container').offsetHeight.

  2. Container 内の子要素の高さを取得する: childNodes を適切に取得する方法に関するリンクを次に示します。これが私がすることです：

    var lastChild = elem.childNodes[elem.childNodes.length - 1];
var verticalOffset = lastChild.offsetTop + lastChild.offsetHeight;

これで、コンテナーの高さと、親の上部から最後の子までの垂直オフセットと、最後の子の高さが得られます。

あとは、差を計算して の高さとして割り当てるだけです#content。

document.getElementById('content').style.height = (containerHeight - verticalOffset) + "px";

編集：概念実証

于 2012-12-26T15:46:22.200 に答える
1

jQueryを使用するとさらに簡単になります。

function setHeight() {
  // using outer height to get margins and padding into account,
  // see http://jqapi.com/#p=outerHeight
  var titleHeight = $("#title").outerHeight(true), 
      totalHeight = $('#container').outerHeight(true);
  $('#content').outerHeight(totalHeight - titleHeight);      
}
// start on document.ready
$(function() {
  setHeight();
});
于 2012-12-26T18:38:04.250 に答える
1

タイトルとコンテンツの間で利用可能なコンテナの高さを共有するのはどうですか？

#container {
  background: #FEE;
  height: 400px;
}
#title {
  border: 1px dotted green;
  height : 20%;
}
#content {
  border: 1px dotted red;
  height: 80%;
}
于 2012-12-26T15:29:59.150 に答える
0

タイトル要素に固定の高さを使用してもかまわない場合は、これを簡単に実現できます。最初のステップは、＃containerの位置を相対的なものにすることです。次に、コンテンツの絶対位置を、下を0に設定し、上をタイトルの高さに設定します（デモを参照）。

于 2012-12-26T15:31:34.110 に答える
0

#content実際には と同じ高さですが、 の高さの数 % を既に消費しているため#container、 でオーバーフローします。要素の配置を試すことができます。#container#title#container

div {
  width: 100%;
}
#container {
  background: #FEE;
  height: 400px;
  position: relative;
}
#title {
  border: 1px dotted green;
  position: relative;
  z-index: 1; /* if you don't want #content overlapping with this element */
}
#content {
  border: 1px dotted green;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
于 2012-12-26T15:46:27.410 に答える
0

#content利用可能な高さの残りを使用する方法を見つけました。

#container { display: table }
#container > div { display: table-row }

ここで見ることができます：http://jsbin.com/amekah/32/

テーブルの行にない他の CSS 要素 (境界線など) が変更される可能性があるため、まだ満足していません。

于 2012-12-26T15:43:49.457 に答える