正確的HTML爲垂直div和resposive高度

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>

的容器顯示爲表和頭&內容顯示錶行。這樣textarea只擴展到剩餘的大小。

Answer 2

請檢查下面的代碼片段：

* { 
 
    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'); 
 

 
}

<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>