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

Question

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

score 10 · Accepted Answer

これは、CSS3ビューポートユニットをtextarea使用して、ビューポートの高さの正確に 50% を取るa の小さな例です。vh

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

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

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

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

textarea {
  height: 50vh;
}

<textarea></textarea>

Opera miniとIEでの部分的なサポートを除いて、さまざまなブラウザでサポートされています。

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

この質問が尋ねられたとき、これはおそらくありませんでしたが、CSS Values and Units Module Level 3 includes viewport-percentage lengths . ただし、 iOS 以外のモバイルブラウザーではサポートされていないようです。

score 0 · Accepted Answer

これをテストするすべてのブラウザーがあるわけではありませんが、ほとんどの場合、高さを指定するだけで機能するはずです。

これを Internet Explorer 7 と Firefox 3.0 でテストしました。

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

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

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

score -2 · Accepted Answer

削除してみてください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

8 に答える 8