外側のdivの高さを常に特定の内側のdivと等しくなるように設定するにはどうすればよいですか？

debugcn 投稿 Dev

CodyBugstein

3つの内部divを含む外部divがあります。

左端の内側のdivで常に外側のdivの高さを決定する必要があります。他の内部divのコンテンツが[左端のdivより]少ない場合、それらには空のスペースがあります。[左端のdivより]多くのコンテンツがある場合は、スクロールバーが表示されます。

SO上のいくつかの他の質問はの高さに、外側のdivの高さを設定することについて尋ねるの内側のdiv。ただし、私の場合、複数の内部divがあり、外部divの高さが左端のdivの高さよりも多かれ少なかれ高くなることはありません。

特にCSSのみを使用してこれを行う方法はありますか？

アフィフに同行

アイデアは、絶対位置を使用してフローからコンテンツの一部を作成し、高さに影響を与えないようにしてから、メインレイアウトにflexboxを使用することです。

.container {
  display: flex;
  border: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

.container>div {
  flex: 1;
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  position: relative;
  overflow: auto;
}

.inner-alt>div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>

これが使用する別のトリックです height:0;min-height:100%

.container {
  display: flex;
  border: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

.container>div {
  flex: 1;
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  position: relative;
  overflow:auto;
}

.inner-alt>div {
  height:0;
  min-height:100%;
}

<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>

追加のラッパーを使用せず、CSSグリッドを使用する上記と同じアイデア：

.container {
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:10px;
  border: 1px solid;
  padding: 10px;
  box-sizing: border-box;
}

.container>div {
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  overflow:auto;
  height:0;
  min-height:100%;
}

<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
 
  <div class="inner-alt">
    eget ibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  <div class="inner-alt">
    eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-2

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

外側のdivの高さを常に特定の内側のdivと等しくなるように設定するにはどうすればよいですか？

外側のdivの高さを常に特定の内側のdivと等しくなるように設定するにはどうすればよいですか？

少なくとも体の高さに一致するように内側のdivを作成するにはどうすればよいですか？

外側の div の高さを内側の div と同じに保つにはどうすればよいですか?

WPFで、外側、中央、内側の境界線を設定するにはどうすればよいですか？

divの外側のすべてを暗くするにはどうすればよいですか？

子要素を外側の div の右側に揃えるにはどうすればよいですか?

右のdivの高さを動的にサイズ設定された左のdivと等しくするにはどうすればよいですか？

内側の円の内側と外側の円の外側で線分を削除するにはどうすればよいですか？

divを開くときに、右側の情報が下にプッシュされないようにするにはどうすればよいですか？

コンテナの外側と内側にインラインdivを表示するにはどうすればよいですか？

固定の高さと幅をdivに設定するにはどうすればよいですか

'div'の高さを隣人と同じに設定するにはどうすればよいですか？

表示されているように設定されているjDialog（if条件の内側）を非表示にするためにvisibleを設定するにはどうすればよいですか（ループの外側）？

3 つの DIV を別の DIV の内側に並べて、最後の DIV を正しく揃えるにはどうすればよいですか?

matplotlibで3次元軸の外側に凡例を設定するにはどうすればよいですか？

複数のdivの内側/外側のイベント「クリック」の条件を作成するにはどうすればよいですか？

CSSを使用してhtmlの外側のdivの高さを設定できるのに、折りたたまれたままの内側のdivの高さを設定できないのはなぜですか？

画像に示されているように、divの外側に境界線を作成するにはどうすればよいですか？

特定のdivの外側にスクロールした場合にクラスを追加するにはどうすればよいですか？

複数のdivを左側に垂直に配置し、1つの大きなdivを右側に配置するにはどうすればよいですか？

divの外側のリンクをクリックしたときに、divの幅と高さを変更するにはどうすればよいですか？

Flutter Dart-内側ではなく外側のborderRadius.circular（20）でコンテナを作成するにはどうすればよいですか？

css-2つの右のdivの高さを左のdivの高さと等しくするにはどうすればよいですか

スリックスライダー：矢印を外側ではなく内側に設定するにはどうすればよいですか？

右の列が左の列の内側にある 2 つの等しい高さの列を作成するにはどうすればよいですか?

フレックスレイアウトを損なうことなくdivの右側に画像を表示するにはどうすればよいですか？

ループの内側に戻る-ループの外側にあることを確認するにはどうすればよいですか？

divの最小の高さを別のdivの高さに設定するにはどうすればよいですか？

:: afterコンテンツを常に<a>の内側に配置するにはどうすればよいですか？

純粋なCSSで大きい列の高さを小さい列の高さに等しく設定するにはどうすればよいですか？