css - CSS列の高さとテキストエリア

Question

ヘッダーとフッターのある2列のレイアウトがあります。これをデモンストレーションしてJSFilddleを作成しました。

通常、左の列には右の列よりも多くのコンテンツが含まれます。

1. 右の列を左の列の高さまで拡張する、またはビューポートの高さを埋めるにはどうすればよいですか？似たようなもののいくつかの例がありますが、常にディスプレイの下部にあるフッターはありません。

2. textareaをその親である右側の列の高さで埋めるにはどうすればよいですか（これを解決することすらできていません）。

Answer 1

あなたのjsfiddleを編集しました。

1. アイデアは、右側の列ブロックに最小高さを設定し、親から高さ属性を継承するのではなく、コンテンツ セクション全体の高さを決定することです。

2. 第二に、テキストエリアについて。このビットはトリッキーです。ユーザーがビュー ポートのサイズを変更するたびに JavaScript を使用してレンダリングし、それに応じてテキストエリアの属性の高さを更新する必要があります。

乾杯

• minHeightは、空のコンテンツ コンテナーがあり、フッターをヘッダーの真下に押し上げたくない場合に重要です。したがって、minheight はそれが起こらないようにします。右側の列の高さが minHeight を超えると、それに応じて親 div が拡張されます。

• hがビューポートの高さであることは、常にウィンドウ全体を拡大したい場合は問題ありません。ただし、Height() の代わりに $(window).innerHeight を使用することをお勧めします。しかし、繰り返しになりますが、これは JavaScript であり、あなたのコードは異なるブラウザーで同じものをレンダリングすることは決してないので、そのことを覚えておいてください :)

  $(window).resize(function() { var h = $(window).height(); $('#MyTextarea').css('height', h-300); });