Question

我觉得这是一个很容易修复的东西，但我太愚蠢了，但我已经谷歌搜索了很长时间才弄明白这一点。由于某种原因，我页面底部的文本框被切断了。我认为这与身体div的设置方式有关。另外，如果有人能告诉我如何让我的textarea与主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;
}

它有效！你现在可以看到完整的textarea。

这是更新的小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/jRCy3/2/

Answer 2

DEMO

#controls {
        position: absolute;
        display: inline-block;
        width:90%;
        height: 100px;
                 //removed 'overflow:hidden' property
        z-index: 0;
    }

文本框被切断

2 个答案: