4

テキストエリア用のカスタム ツールバーを設定しようとしています。次のものがあります。

html :

<div id="main">
  <div id="toolbar"></div>
  <textarea></textarea>
</div>

css :

#main {
  background-color: #ddd;
  height: 400px;
  width: 400px;
  position: relative;
}

#toolbar {
  background-color: #444;
  height: 40px;
  color: white;
}

textarea {
  outline: none; 
  border: none;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  margin: 0;
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
}

Chrome では期待どおりに動作しますが、Firefox では / つまり、テキスト領域が div の使用可能なスペースをすべて消費していません。

ツールバーがdivの上部で40pxを占め、テキストエリアが残りの高さをすべて消費するように設定するにはどうすればよいですか。

私はこのものを動的にサイズ変更しているので、 textarea に「px」の高さまたは幅を使用できません。

コードペンはこちら: http://codepen.io/anon/pen/pDgvq

4

5 に答える 5

5

より良い提案

テキストエリアの幅と高さを 100% に設定します。次に、透明な 40px の上枠を指定します (実際には色は重要ではありません)。box-sizing を border-box に設定してください。ここで、相対的なツールバーをより高い z-index に配置します - ほら。

ペン: http://codepen.io/anon/pen/nFfam

オールディーズ

テキストエリアを下に移動するのではなく、ツールバーを上に移動します。

#main {
  background-color: #ddd;
  height: 200px; width: 400px;
  position: relative;
  top: 40px;
}

#toolbar {
  background-color: #444;
  height: 40px; width: 100%;
  position: absolute;
  top: -40px;
}

textarea {
  width: 100%; height: 100%;
  box-sizing: border-box;
}

ペン: http://codepen.io/anon/pen/mEGyp

于 2013-01-10T07:05:36.317 に答える
3

FirefoxとIE9+はどちらもCSS機能をサポートしてcalc()います（ただし、IE8では運が悪いです。何をサポートしているかわかりません）。

textareaペンのCSSにこれらの行を追加しました（更新バージョン）：

width: calc(100% - 2px);
height: calc(100% - 41px);
padding: 0;

パディングは正規化のためだけのものです。ニーズに合ったものを選択できますが、それにcalc()応じてピクセル値を調整してください。2px幅は、左右の境界線を補正するためのものです。高さはツールバーが40 、41px下の境界線が1です。

于 2013-01-10T12:46:53.697 に答える
1

width:-moz-available; height:100%;resize: none;に追加textarea

 textarea {
  outline: none; 
  border: none;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  margin: 0;
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;  width:-moz-available; height:100%; 
  resize: none;  
}

更新されたデモ

別の方法

textareaの周りにdivを追加し、そのdivにposition：absoluteを指定できます。

HTML

<div id="main">
  <div id="toolbar"></div>

  <div id="container">
  <textarea></textarea>
  </div>

</div>

CSS

#container{ 
  position:absolute;
  bottom:0px;
  top:40px; 
  width:100%
}
textarea {
  outline: none; 
  border: none;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  resize: none;  height:100%; width:99.5%
}

デモ2

于 2013-01-10T06:57:45.473 に答える
0

これがあなたの望む結果であることを願っています：デモ

#main {
  background-color: #ddd;
  width: 400px; height: 200px; 
  padding: 0;
}

div #toolbar {
  background: #444;
  width: 100%; height: 40px;
}

textarea {
  margin: 0; 
  width: 100%; height: 100%;
}
于 2013-01-10T07:29:35.550 に答える
0

% で textarea の高さと幅を使用して、% でツールバー div に top を適用することもできます。たとえば、top が 10% の場合、textarea に 90% の高さを指定します。

于 2013-01-10T07:07:05.880 に答える