7

関連する JS Fiddle http://jsfiddle.net/arosen/FMQtR/

問題

私のHTMLは次のようになります。

<div id='parent'>
  <div id='one'>
    A variable amount of text here.
  </div>

  <div id='two'>
    A less important variable amount of text here.
  </div>
</div>

#parent div は固定の高さであり、変更できません。その中に、少なくとも 2 つの子 div があります。最初のもの (または多数) には、その高さを決定する不明な量のテキストが含まれます。最初のものの内容に基づいて、最後のものは、親に残っているがオーバーフローしない限り、高さを占めるようにしたいと考えています。

私の現在のCSSの例は次のとおりです。

#parent {
    border: 1px solid #000;
    height: 150px;
    width: 150px;
}
  #one, #two {
    border: 1px dashed #333;
    height: auto;
    margin: 5px;
    padding: 5px;
    overflow: hidden;
  }

私の現在のJSソリューション

function() {
  var $two = $('#two');
  var $parent = $('#two').parent()
  $parent.css('overflow', 'hidden');
  var heightDifference = $parent[0].scrollHeight - $parent.height();
  $two.css('height', $two.height() - heightDifference);
}

この問題に対する CSS レイアウトまたは HTML ソリューションがあるかどうか、または最後のボタンを押して実行されるフィドルにある JS ソリューションを使用する必要があるかどうか疑問に思っています。

EDITページでテキストが一度変更されることはありませんが、サーバーからロードされた情報によっては、ページがレンダリングされるまでテキストの量がわからないため、JSフィドルを更新しました。

EDIT 2最新の (および IE 9) ブラウザーのみをサポートする必要があります。

編集 3他の jQuery プラグインで使用されるため、最後の divには高さが必要です。

4

2 に答える 2

3

いいえ、できません。CSS はプログラミング言語ではありません。代わりに、すべてselector{ property:value; }のタプルが特定の要素セットのルールを定義します。現在の高さ、現在の幅、またはその他のプロパティなどの実際のスタイルは、CSS ではアクセスできません。

「パーセンテージ値はどうですか？」と思う人もいるかもしれません。これらは、多くの場合、親要素 (この場合は ) である包含ブロックに基づいてい#parentます。

そのため、すべてに対して固定の高さを指定するかdiv(提供された情報によると、これは不可能です)、JavaScript ベースのソリューションを使用する必要があります。

于 2012-06-01T15:23:21.400 に答える
0

ボーダー/マージン/パディング/ラインの高さをあまり設定していない場合は、これを達成できます。(parent div - (all margins/padding)) が行の高さで完全に割り切れることを確認してください。部分的な行やオーバーフローが表示されることはありません。ただし、ボーダー スタイルでは、CSS だけでこれを実現することはできません。

親 div に別の要素を追加することでハッキングすることもできます。たとえば、上部の破線の段落タグと、上のソリューションでオーバーフローした境界線を非表示にするために配置された太い白い下部境界線の段落タグです...しかし、それはハッキーです。私はのファンではなく、ブラウザー間で簡単に壊れる可能性があります。

TL;DR - JS を使用するだけです。

于 2012-06-01T15:52:24.823 に答える