html - 文本框切断

Question

我觉得这是一个很容易解决的问题，但我太笨了，无法弄清楚，但我已经用谷歌搜索了很长时间才弄明白。由于某种原因，我页面底部的文本框被截断了。我认为这与 body div 的设置方式有关。另外，如果有人能告诉我如何使我的文本区域与主 div 的大小相同，那就太好了。 JSFiddle

HTML

    <div id="body">
<div id="main">
    <h1>Test</h1>
    <hr />
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
    <div id="controls"><form action="#" method="POST">Enter a Comment: <br /><textarea sizable="false"></textarea><br /><input type="submit" value="submit" /></form></div>
</div>

CSS

#main {
    background-color:white;
    position:relative;
    min-height:300px;
    padding: 20px 20px 20px 20px;
    border-left: 1px grey solid;
    border-right: 1px grey solid;
    border-bottom: 1px grey solid;
}
#main p {
    font-size:20px;
    word-wrap:break-word;
}
#header {
    background-color: #C0C0C0;
    width: 100%;
    border-bottom: 1px solid grey;

}
html, body{
    height: 100%;
}
#body {
margin-left:75px;   
margin-right:75px;
margin-bottom:125px;
margin-top:0;
}
#controls {
    position: absolute;
    display: inline-block;
    width:90%;
    height: 100px;
    overflow: hidden;
    z-index: 0;
} #controls form textarea {
    resize: false;
    width: 100%;
    height: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 0;
} 

Answer 1

我刚刚从 CSS 选项卡中删除了这个属性

#controls {
  overflow: hidden;
}

成功了!您现在可以看到完整的文本区域。

这是更新后的 fiddle :http://jsfiddle.net/afzaal_ahmad_zeeshan/jRCy3/2/