垂直div和resposive高度的正确html

Question

我想制作用户可以写东西的标题和内容区域。我希望让它响应。这是我的HTML：

<div class='container'>
  <div class='writingTask header'>
    <i title='Save' class="fa fa-floppy-o"></i>        
  </div>

  <div class='writingTask content'>
    <textarea></textarea>
  </div>      
</div>

这是我的CSS：

* {
  box-sizing: border-box;
  margin:0;
  padding: 0;
}

html, body {
  width:100%;
  height: 100%;
}

.container {
  width: 50%;  
  height: 50%;
  border: 1px solid black;
  background-image: url('http://static1.grsites.com/archive/textures/beige/beige001.jpg')
}

.writingTask.header {
  width: 100%;
}

.writingTask.header > i {
  float: right;
  cursor:pointer;
  margin: 5px;  
}


.writingTask.content {
  height:100%;
  overflow:hidden;
  clear:both;
}

textarea {
  width: 100%;
  height:100%;
  resize: none;
  background-image: url('http://static1.grsites.com/archive/textures/beige/beige001.jpg');

}

这是DEMO。如您所见，textarea比容器大。我知道这是因为height:100%。如何正确地设计这个？

Answer 1

我希望this是你想要的。

* {
  box-sizing: border-box;
  margin:0;
  padding: 0;
}

html, body {
  width:100%;
  height: 100%;
}

.container {
  width: 50%;  
  height: 55%;
  border: 1px solid black;
  background-image: url('http://static1.grsites.com/archive/textures/beige/beige001.jpg');
  display: table;
}

.writingTask.header {
  width: 100%;
  display: table-row;
}

.writingTask.header > i {
  float: right;
  cursor:pointer;
  margin: 5px;  
}


.writingTask.content {
  height:91%;
  overflow:hidden;
  clear:both;
  display: table-row
}

textarea {
  width: 100%;
  height:100%;
  resize: none;
  background-image: url('http://static1.grsites.com/archive/textures/beige/beige001.jpg');

}

<div class='container'>
  <div class='writingTask header'>
    <i title='Save' class="fa fa-floppy-o"></i>
    
  </div>
 
  <div class='writingTask content'>
    <textarea></textarea>
  </div>
  
</div>

容器显示为表和标题＆amp;内容显示 table-row 。这样textarea只会扩展到剩余的大小。

Answer 2

请查看以下代码段：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  margin:0;
  padding: 0;
}

html, body {
  width:100%;
  height: 100%;
}

.container {
  width: 50%;  
  height: 50%;
  border: 1px solid black;
  background-image: url('http://static1.grsites.com/archive/textures/beige/beige001.jpg')
}

.writingTask.header {
  width: 100%;
  height: 20%;
}

.writingTask.header > i {
  float: right;
  cursor:pointer;
  margin: 5px;
  
}


.writingTask.content {
  height: 80%;
  overflow:hidden;
  clear:both;
}

textarea {
  width: 100%;
  height:100%;
  resize: none;
  background-image: url('http://static1.grsites.com/archive/textures/beige/beige001.jpg');

}

＆＃13;

<div class='container'>
  <div class='writingTask header'>
    <i title='Save' class="fa fa-floppy-o"></i>        
  </div>

  <div class='writingTask content'>
    <textarea></textarea>
  </div>      
</div>

＆＃13;

＆＃13;

＆＃13;