BinaryDevelop
  1. ホーム
  2. css

親要素を埋めるためのinline-block要素の高さの取得

2023-12-31 14:48:11

質問

2つのアイテムを含むコンテナがあります。 そのうちの1つのアイテムは select 要素なので size 属性を設定する必要があります。 コンテナ内の他のアイテムは、コンテナに合わせて高さを伸ばしたいのですが。 それがわからないのです。 そのセレクトボックスのサイズが分からないので、明示的にコンテナの高さを設定したくない。 

.container {
  padding: 5px;
  border: 1px solid black;
}

.container .column {
  display: inline-block;
  width: 40%;
  background-color: #AAA;
  padding: 5px;
  margin: 5px;
  vertical-align: top;
  height: 100%;
}

select {
  width: 100%;
}

<div class="container">
  <div class="column">Stretch to fill?</div>
  <div class="column">
    <select size="15">
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
  </div>
  <div>

どのように解決するのですか？

もし table-cell がオプションである場合は、以下のようになります。 

.container {
  display: table;
  width: 100%;
  padding: 5px;
  border: 1px solid black;
}

.container .column {
  display: table-cell;
  width: 40%;
  background-color: #AAA;
  padding: 5px;
  border: 5px solid white;
  vertical-align: top;
  height: 100%;
}

select {
  width: 100%;
}

<div class="container">
  <div class="column">Stretch to fill?</div>
  <div class="column">
    <select size="15">
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
  </div>
  <div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します