Question

请考虑此示例http://plnkr.co/edit/xnyrIy1LLZLIBAs6VIOr?p=preview

我只是想让textarea占据面板的整个高度，面板占据整个页面的页面。然而，由于某种原因它溢出。那是为什么？

    <html>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">


<style>
  body, html{
    box-sizing: content-box;
    background-color:#eeeeee;
    height:100%;
    overflow:hidden;
  }

  textarea{
    box-sizing: content-box;
    resize: none;
    height: 100% !important;
    width:100%;
  }

  .form-control, .panel, .container {
    box-sizing: content-box;
    margin: 10px;
      height: 100%;
  }

</style>

<body>

<div id="c2">
<div id="c1">

<div class="container">
<h1>Hello, hello!</h1>
  <div class="panel">
    This is the panel<br><br>
    <textarea class="form-control">
    </textarea>
  </div>
</div>

</div>
</div>


</body>
</html>

Answer 1

只需删除textarea的边距和填充：

textarea {
    padding: 0 !important;
    margin: 0 !important;
}

删除height: 100%的{{1}}。 textarea将不再溢出。

但是，如果你想保留一些填充，那么改变你的html：

.form-control, .panel, .container

Answer 2

在面板和容器中单独使用以下代码表单控件以删除100％尺寸问题

.form-control{
height: 110%;
margin:10px;
width: 90%;}

检查出来:: http://plnkr.co/edit/f7VLf67inHvhsoerx6t3?p=preview

编辑：我认为你只需要全尺寸的文字区域，请检查一下 http://plnkr.co/edit/x8JlgDgFeuZpz27JWDx6?p=preview

使内容占用整页CSS + Bootstrap

2 个答案: