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大小沒有變化，只是切圖時丟失了）
在這裡插入圖片描述

html實現輸入框高度自適應

html實現輸入框高度自適應解決方案情況一：父div中只有一個元素時正常寫做網頁的時候為了解決textarea輸入時可以隨著文字的增加自動調整高度，將父div的heigth設定為auto 情況二：父d

微信小程式 image圖片元件實現寬度固定高度自適應

新增mode屬性 <image class="empty-icon" src="/pages/image/list-emptyx2.png" mode="widthFix"></image> mode 有效值： mode 有 13 種模式，其中 4 種是縮放模式

TableViewCell 中嵌入WKWebview 顯示HTML字串，TableView高度自適應

需求：每個tableviewcell 新增一個wkwebview 用於顯示HTML 要求webview高度自適應，，每個cell高度自適應，，網上查的資料，，使用的通知來重新整理tableview，，會使tableview重新整理次數過多，，本文的方法tableview只重新

【IOS】最簡單方法實現Cell文字高度自適應.

本教程適合新手. 系統:IOS7之後. 純文字高度. 血的教訓: 相信大家曾經為了實現cell的高度自適應，肯定少苦。那個時候，我是在我的資料模型model中新增一個height屬性，實現它的get方法，在get方法中計算需要多行顯示文字的高度，然後再加上其他亂七八糟的高度並返回，然

基於JQ 根據輸入內容自適應輸入框高度支援輸入增高渲染時設定高度和內容一致

// 呼叫方法 bootText('textarea', 50) // 第一個引數是class 或者 id 第二個引數是這個class或者id物件的最小高度 function bootText(cls, minHeight){ var idArr = $(cls);

textarea文字框根據輸入內容多少自適應高度

/** * 文字框根據輸入內容自適應高度 * @param {HTMLElement} 輸入框元素 * @param {Number} 設定游標與輸入框保持的距離(預

獲取textarea文本框所選字符光標位置索引，以及選中的文本值；textarea高度自適應，隨著內容增加高度增加；獲取輸入框中的光標位置

creat substring ons osi 內容 poi name range init 獲取textarea文本框所選字符光標位置索引，以及選中的文本值　　　　　　　　$.fn.selection = function () {

高度自適應的輸入框

　　有時候我們需要一個高度能隨內容自動增加的輸入框，input 顯然不行，因為 input 裡的文字是不換行的。文字域 textarea 裡的文字倒是換行的，可一旦文字內容超過其高度，textarea 就會增加一個煩人的滾動條，這是很影響視覺的，就如同下面： <textarea cols="30" ro

CSS完美實現iframe高度自適應（支持跨域）

真的高度 org lns nal aid .org bsp 方法 Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭

實現不同分辨率下高度自適應

tex 微軟雅黑 java utf har -c 自適應 height ont html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

微信小程序 Image 圖片實現寬度100%，高度自適應

高度自適應 nbsp src 小程序設置 hello clas 自適應 mode 做法如下：樣式設置寬度100%， .img{ width:100%;} 添加屬性 mode="widthFix"， <image class="img" src="../../ima

div模擬textarea文本域輕松實現高度自適應

body post HR word-wrap overflow out 模擬 target get <style> .textarea{ width:400px; min-height:20px; max-height:300p

android設置GridView高度自適應，實現全屏鋪滿效果

== post http istview div GridView dap item 拉伸使GridView每個item的高度自適應拉伸，達到整個GridView剛好鋪滿全屏的效果。 public static void setGridViewMatchParent(G

css實現高度自適應正方形

spl splay code gin tle margin content div hidden <!DOCTYPE html> <html> <head> <title></title> </hea

CSS完美實現iframe高度自適應（支援跨域）

Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭疼萬分。百度或是谷歌一下，確實很多解決方法，但嘗試一下，會發現問題很多：瀏覽器相容性差，不能自

Android 支付密碼輸入框，自定義EditText實現密碼輸入框功能；

剛擼出來的密碼輸入框，註釋和邏輯看著挺清晰的，一些屬性還沒有新增，下個部落格把屬性新增上去；看一下圖：直接看程式碼吧！ import android.content.Context; import android.graphics.Canvas; import android.

jquery之div模擬textarea文字域輕鬆實現高度自適應

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="tex

Android實現ViewPager廣告輪播控制元件在不同解析度的螢幕下高度自適應

這篇文章首先我自己感覺，有點兒個人化的味道~為什麼這麼說？因為很遺憾，我這裡實現 “ ViewPager寬度鋪滿、高度自適應 ” 的方法又和網上其他的不太一樣。雖然我依然是隻寫了幾句程式碼來實現這個要求，依然沒有用什麼自定義元件~可是這次和之前不一樣，這次不是簡單

怎麼讓Html的高度自適應螢幕高度

在寫css靜態頁面的時候讓Html的高度自適應螢幕高度是一個常見的需求，比如你有一個需要置底的bottom按鈕，需要在內容不足一屏的時候顯示在螢幕的底部，在內容超過一屏的時候顯示在所有內容的底部。

Android動態設定GridView的高度，固定column，實現高度自適應

動態設定GridView的高度，固定column，根據gridview中的item個數設定高度：呼叫以下方法： [java] view plain copy print ?

html實現輸入框高度自適應

html實現輸入框高度自適應

解決方案

相關推薦