Search code examples
csshtmlgoogle-chrometextarea

Height: 100% for textarea causes vertical scroll bar in Chrome

Operating system: Windows XP
Browser: Chrome 31
Issue: When I look at the following, I see an extra vertical scrollbar:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Textarea</title>
    <style>
        * {
            width: 100%;
            height: 100%;
            margin: 0;
            border: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <form>
        <textarea></textarea>
    </form>
</body>

</html>

URL: https://googledrive.com/host/0B5jOXzxlxbMhYVF3b0lubjlDWm8/textarea.html

It doesn't happen if I use HTML 4.01 Transitional doctype: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


What's the reason and solution?
Thanks!

Solution

  • You can fix it using display: block; for your textarea or you can use vertical-align: top; as well..

    Buggy Demo

    Fixed Demo

    Vertically Aligned

    Reason: Chrome uses display: inline-block; for the textarea element which causes that issue

    enter image description here