親身長と同じ高さdivをつくる方法

6621 ワード
css javascript beginners html テキストリンク
こんにちはアルチザン.
今日このブログ記事で親の高さdivと同じ高さを作成する方法をあなたに示すつもりです.
ほとんどの場合、同じ高さを持つdivを作成する必要があります.なぜなら、divが不等長の段落を持っている場合、divはそれほど良くないように見えます.それで、同じ高さのdivを作ってください、我々は以下のコードを参照します.
より多くのポストのためにさらに私に続く前に
.ltag__user__id__672647 .アクションボタン
背景色:角9 f 0 b 46!重要
カラー:竜華ffffff!重要
ボーダーカラー:9 .重要
｝

Snehal に続く
Software Developer by Profession, mostly works in Laravel | Vue JS | Nuxt JS | PHP | Javascript | InertiaJS.
さて、コードを見ましょう
 <h3>Example of same height div with its respective parent height </h3>
 <div class="container">
    <div class="child-div-1"><p>Div 1</p></div>
    <div class="child-div-2"><p>Div 2</p></div>
    <div class="child-div-3"><p>Div 3</p></div>
 </div>
CSSファイルを作成し、以下のCSSコードを追加します
.container {
  display: flex;
  background: #ffc;
  height: 50vh;
}
.child-div-1 {
  background: #000;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-1 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #fff;
}

.child-div-2 {
  background: #ee6;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-2 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #000;
}

.child-div-3 {
  background: #fdd;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-3 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: brown;
}
また、結果のコードペンを参照することもできます
読書ありがとう🦁 🦄
白駿1744号-束手
JDBC setCatalog