2

私は自分のコードを機能させるためにしばらく努力してきました。サイズが変更されないいくつかのナビゲーションバーを除いて、テキストエリアがページ全体を占めるようにしようとしています。正常に動作しましたが、スクロールバーが部分的にブロックされていたため、パディングを使用してナビゲーションバーを回避する代わりに、テキストエリアが空きスペースを占有する必要があります。

ここに私のHTMLがあります:

<body>
<div id="topbar"></div>
<div id="tabbar"></div>
<div id="sidebar"></div>
<textarea wrap="off" id="maintext" autofocus="autofocus"> </textarea>
</body>

ここに私のCSSがあります：

#topbar{
position: fixed;
top: 0px;
right: -1px;
left: -1px;
border: 1px solid black;
height: 35px;
background: black;
z-index: 1;
}
#tabbar{
position: fixed;
right: -1px;
left: -1px;
height: 20px;
background: grey;
margin: 29px auto;
border: 1px solid grey;
z-index: 2;
}
#sidebar{
position: fixed;
height: 100%;
left: 0px;
width: 15px;
margin: 51px auto;
border: 1px solid lightgrey;
background: lightgrey;
z-index: 3;
}
#maintext{
position: fixed;
right: 0px;
bottom: 50px;
left: 0px;
top: 58px;
margin-left: 20px;
width: 100%;
height: 100%;
border: none;
outline: none;
resize: none;
padding-top: 5px;
padding-left: 0px;
}
4

2 に答える 2

1

IE8+ (推奨)

これは、完全に表示される大まかな例ですtextarea(つまり、何もクリップされていません): http://jsfiddle.net/UvJAM/1/

必要に応じて変更できますがbox-sizing、IE7 以下ではサポートされていない を使用するという警告があります。

textareaまた、上部/下部のオフセットをパディングで管理できるように、の周りにラッパーを追加しました。

<div id="textwrapper">
    <textarea wrap="off" id="maintext" autofocus="autofocus"></textarea>
</div>

IE7

http://jsfiddle.net/UvJAM/4/

このモデルは、 のスタイリングを制限するため、柔軟性が低くなりtextareaます。ただし、IE7 はサポートしています (少なくともエミュレーション モードでは)。IE9 と Chrome でも動作します。

重要な部分は、100% の高さと幅を実現するために 4 部構成の位置ステートメントを使用することです。

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
于 2012-07-24T00:00:41.997 に答える
0

DIVTextAreas は、CSS スタイルに関しては sよりもはるかに柔軟です。DIVおそらく、属性でa を使用することを検討できcontentEditableます (こちらを参照してください: https://developer.mozilla.org/en/HTML/Content_Editable )。これは HTML5 標準ですが、驚くほど古いブラウザー (IE6、FF3.5) で十分にサポートされていますが、ほとんど使用されていません。

ただし、を引き続き使用したい場合は、CSStextareaを次のように変更すると、目的#maintextが達成されると思います。幅と高さを 100% に設定すると、実際にはテキスト領域が本文と同じ幅と高さになります。そのため、配置すると、実際にはページからはみ出します。

#maintext{
position: fixed;
right: 0px;
bottom: 0px;
left: 20px;
top: 58px;
border: none;
outline: none;
resize: none;
padding-top: 5px;
padding-left: 0px;
}

詳細はcontenteditableこちら: http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable

于 2012-07-23T23:37:15.940 に答える