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

It was because of the line-height property of the body.. Set it to 0..

body
{
    line-height: 0;
}

If you do not want to do this you can set the textarea height:99%; instead

Check FIDDLE

于 2012-10-07T01:06:50.103 回答
0

Though it is not the best solution, I have just applied a little trick and it's working for all sizes of monitors!

 $(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;
    }​

See the demo

于 2012-10-07T01:08:24.867 回答
-1

您看到滚动条的原因是 textarea 仍然有边距。要解决此问题，请将 textarea 的边距设置为 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 显然以某种方式增加了额外的高度。要专门为 Chrome 解决此问题，您必须为元素添加负边距（例如：边距：-2px 0）。此外，我的建议是仅在 Chrome 是浏览器时添加负边距（搜索如何执行此操作）。

于 2012-10-07T00:40:01.267 回答
-1

如果您在页面上只有一个文本区域，请为 body 和 html 标签设置 hight

CSS：

html,body{ height:100%}

演示：http: //jsfiddle.net/SWLsH/1

编辑： 100% 的 textarea 高度不考虑导致正文滚动条的边框。使高度 99%

于 2012-10-07T01:01:49.040 回答