html實現輸入框高度自適應
阿新 • • 發佈:2019-01-04
html實現輸入框高度自適應
情況一:父div中只有一個元素時正常寫
做網頁的時候為了解決textarea輸入時可以隨著文字的增加自動調整高度,將父div的heigth設定為auto
情況二:父div中有兩個元素且設定了浮動,如果設定父div高度為auto後會出現下圖的情況
</div> <div style="width: 200px;height: 50px;float: right"> <textarea class="textarea"></textarea> </div> <div style="clear: both"></div> <------清除浮動
加上清除浮動的標籤後,父div並不能隨著文字框的高度增加而增加
解決方案
將div設定為可輸入狀態 contenteditable=“true”,實現類似文字框的效果
全部程式碼:
<style>
.header{
height: auto;//關鍵程式碼,父div的高度自適應,可以跟隨子div高度變化
width: 300px;
background-color: #8FCDA0;
padding-top: 20px;
padding-bottom: 20px;
}
.header_left{
float: left;//關鍵程式碼,設定子div浮動效果
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 5px;
background-color: #F581B1;
}
.header_right{//可輸入div的樣式,類似文字框
min-height: 50px;//設定最小高度
height: auto;//高度根據內容自適應
float: right;//關鍵程式碼,設定子div浮動效果
width: 198px;
border: 1px solid #4E5465;
background-color: white;
}
.footer{
width: 300px;
height: 100px;
color: white;
margin-top: 20px;
background-color: #4E5465;
}
</style>
<body>
<div class="header">
<div class="header_left">一個div輸入框</div>
<div class="header_right" contenteditable="true"></div>
<!--設定為可輸入狀態-->
<div style="clear: both"></div>
<!--清除浮動-->
</div>
<div class="footer">我是底部的div</div>
</body>
效果:
(底部的div大小沒有變化,只是切圖時丟失了)