Question

我的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;
}

有谁可以告诉我为什么有一个滚动条（textarea不够小，不适合窗户的高度）？

Answer 1

这是因为正文的 line-height 属性..将其设置为0 ..

body
{
    line-height: 0;
}

如果您不想这样做，可以设置textarea height:99%;而不是

Check FIDDLE

Answer 2

虽然它不是最好的解决方案，但我只是应用了一个小技巧，它适用于所有尺寸的显示器！

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

请参阅demo

Answer 3

您看到滚动条的原因是因为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修复此问题，您必须为元素添加负边距（例如：margin：-2px 0）。此外，我的建议是仅在Chrome是浏览器时添加负边距（搜索如何执行此操作）。

Answer 4

如果页面上的所有内容都是textarea，请为body和html标记设置hight

CSS：

html,body{ height:100%}

样本： http://jsfiddle.net/SWLsH/1

编辑：textarea 100％的高度并不能解释导致身体滚动条的边界。使身高达到99％

textarea占据了太多的高度

4 个答案: