web-dev-qa-db-ja.com

CSS：ビューポートの高さのパーセンテージとしてのtextareaの高さ

テキスト領域の高さは、たとえばビューポートの高さの50％に等しいと言いたいです。どうやってやるの？シンプルな height: 50%はトリックを行いません。

cssheight
13
avernet

単純な高さ：50％ではうまくいきません。

いいえ、その親には明示的な高さがないためです。だから何の50％？親は「自動」と言います。これは、子コンテンツの高さに基づいて行うことを意味します。これは親の身長によって異なります。ああ！等.

したがって、親にパーセンテージの高さを与える必要があります。そして、親の親、ルートまでずっと。ドキュメントの例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        html, body, #mything, #mything textarea { height: 100%; }
    </style>
</head><body>
    <div id="mything">
        <textarea rows="10" cols="40">x</textarea>
    </div>
</body></html>

すべてに高さを設定する必要がない場合のもう1つの可能性は、絶対配置を使用することです。これにより、ディメンションの基になる要素が、直接の親から、デフォルトの「静的」以外の「位置」設定を持つ最も近い祖先に変更されます。配置された祖先要素がない場合、寸法はビューポートと同じサイズの「初期包含ブロック」に基づいています。

最後に、テキスト領域に追加のパディングと境界線が適用されるため、「100％」がわずかに大きすぎるという些細な問題があります。これを回避するには、次の方法があります。

  • 95％のようなもので妥協する、または
  • textareaでパディングとボーダーを0/noneに設定する、または
  • 「box-sizing：border-box;」を使用する「高さ」の意味を変更します。これはCSSの将来のスープ機能であり、ブラウザ固有の多くの追加の言い換え（「-moz-box-sizing」など）が必要です。
42
bobince

これは、CSS3 textareaビューポートユニット を使用してビューポートの高さのちょうど50％を占めるvhの小さな例です。

最初の包含ブロックの高さの1％に等しい。

したがって、textareaの高さを50vhに設定すると、bodyの高さの半分になります。

html, body, textarea {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

textarea {
  height: 50vh;
}
<textarea></textarea>

それは かなりよくサポートされていますOpera miniと[〜＃〜] ie [の部分的なサポートを除いて、さまざまなブラウザで〜＃〜]。

8
Balthazar

これを行うには、何らかの方法でjavascriptを使用する必要があると思います。サイズ変更イベントを処理し、テキスト領域をその数のピクセルに設定します。

2
FryGuy

Display：blockを設定すればできます。しかし、html 4.01 strictでは、列と行を定義する必要がありますが、cssでそれらをオーバーライドできると思います。

1
Vasil

HTMLとCSSは、このような高さのあることを行うのはあまり得意ではありません。彼らは間違いなく、自由に流れるページを垂直方向にスクロールすることについてです。 FryGuyが言うように、JavaScriptが最も完全なソリューションになる可能性が高いと思います。

1
Kevin Conner

この質問が出されたとき、これはおそらく周りではありませんでしたが、CSS値と単位モジュールレベル3には viewport-percentage lengths が含まれています。 iOS以外のモバイルブラウザではサポートされていない のようですが。

0
legoscia

これをテストするためのすべてのブラウザを持っているわけではありませんが、高さを指定するだけで機能することをほとんどの人が受け入れているようです。

これをInternetExplorer7とFirefox3.0でテストしました。

次のコードを使用するだけです。

<textarea style="height: 50%; width: 80%;">Your text here</textarea>

どのブラウザで問題が発生しましたか？

0
Brian