0

私の HTML は、本文内の単なるテキストエリアです。

私のJavaScript（jqueryを使用）は次のとおりです。

$(function()
{
    $("body").height($(window).height())
})

私のCSSは：

textarea
{
    width: 100%;
    height: 100%;
    resize: none;
    background-color: red;
    border: none;
    padding: 0;
}
textarea:focus
{
    outline: none;
}
body
{
    background-color: #DBDBDB;
    margin: 0;
}

スクロールバーがある理由を誰か教えてもらえますか (テキストエリアがウィンドウの高さに収まるほど小さくありません)。

4

4 に答える 4

0

これは body のline-heightプロパティが原因でした.. 0 に設定してください..

body
{
    line-height: 0;
}

これをしたくない場合は、 height:99%; 代わりにテキストエリアを設定できます

フィドルをチェック

于 2012-10-07T01:06:50.103 に答える
0

これは最善の解決策ではありませんが、ちょっとしたトリックを適用しただけで、すべてのサイズのモニターで機能します!

 $(function()
{
    var height = $(window).height() -5;
    var width = $(window).width() - 5;
    $('#someId').css('height', height);
    $('#someId').css('width', width);
});

CSS:

   textarea
    {
        resize: none;
        background-color: red;
        border: none;
        padding: 0;
        margin: 0;
        outline: none;
    }
    textarea:focus
    {
        outline: none;
    }
    body
    {
        background-color: #DBDBDB;
        margin: 0;
    }​

デモを見る

于 2012-10-07T01:08:24.867 に答える
-1

ページにテキストエリアしかない場合は、本文と html タグの高さを設定します

CSS:

html,body{ height:100%}

デモ: http://jsfiddle.net/SWLsH/1

編集: 100% の textarea の高さは、ボディ スクロール バーの原因となる境界線を考慮していません。高さを99%にする

于 2012-10-07T01:01:49.040 に答える
-1

スクロールバーが表示されるのは、テキストエリアにまだ余白があるためです。これを修正するには、テキストエリアにマージンを 0 に設定します。

改訂された CSS:

textarea
{
    width: 100%;
    height: 100%;
    resize: none;
    background-color: red;
    border: none;
    padding: 0;
    margin: 0;
}
textarea:focus
{
    outline: none;
}
body
{
    background-color: #DBDBDB;
    margin: 0;
}

編集：

上記のコードは、要素に対して「固有の」変更を行わないブラウザーで機能します。どうやらクロムはどうやら余分な高さを追加しています。特に Chrome でこれを修正するには、要素に負のマージンを追加する必要があります (例: margin: -2px 0)。また、ブラウザーが Chrome の場合にのみ、負のマージンを追加することをお勧めします (これを行う方法を検索してください)。

于 2012-10-07T00:40:01.267 に答える