Html 使内容占据整页CSS+；独自创立_Html_Css_Twitter Bootstrap

Html 使内容占据整页CSS+；独自创立

html css twitter-bootstrap

Html 使内容占据整页CSS+；独自创立,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,以这个例子为例我只是想让textarea占据整个面板的高度，面板占据整个页面。然而，由于某种原因，它泛滥了。为什么呢 <html> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <style> body, html{ box-sizing: content-box; backgroun

以这个例子为例

我只是想让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>


正文，html{
框大小：内容框；
背景色：#eeeeee；
身高：100%；
溢出：隐藏；
}
文本区{
框大小：内容框；
调整大小：无；
身高：100%！重要；
宽度：100%；
}
.form控件、.panel、.container{
框大小：内容框；
利润率：10px；
身高：100%；
}
你好，你好！
这是面板

只需删除文本区域的边距和填充：

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

移除

窗体控件、.panel、.container的高度：100%
。文本区域将不再溢出
但是，如果要保留一些填充，请更改html：
<div class="panel">
    <div class="panel-heading">This is the panel</div>
    <div class="panel-body">
        <textarea class="form-control"></textarea>
    </div>
</div>


这是专家组
从面板和容器中分别使用窗体控件和样式中的以下代码来消除100%大小的问题
.form-control{
height: 110%;
margin:10px;
width: 90%;}

看看这个：：
编辑：
我想你只需要全尺寸的文本区域，请检查这个
谢谢，这解决了textarea的问题。但是面板和文本区域仍然占据了页面的100%以上。（移除溢出：隐藏，你会看到）如果我100%移除高度，面板和文本区域仍然会溢出页面大小。我希望面板和文本区域占据禁用滚动的页面。请看这里，谢谢，但在您的示例中，面板和文本区域仍然溢出页面大小。。。