HTML網(wǎng)頁中textarea的高度自適應(yīng)怎么實(shí)現(xiàn)

一、使用textarea標(biāo)簽進(jìn)行多行文本的輸入有很多限制，比如不能實(shí)現(xiàn)高度自適應(yīng)，會出現(xiàn)難看的滾動條等問題。

榕江網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

HTML5中添加了一個新屬性contenteditable，該屬性可以讓input,textarea以外的不可編輯的標(biāo)簽具備可編輯功能；

用法如下：

//contenteditable="true"當(dāng)屬性值為true的時(shí)候，可編輯標(biāo)簽內(nèi)可以寫入標(biāo)簽，對于復(fù)制的具有樣式的內(nèi)容，其樣式會保留；

div contenteditable="true"我是可編輯的富文本框/div

//contenteditable="plaintext-only"當(dāng)屬性值為plaintext-only時(shí)，該可編輯標(biāo)簽內(nèi)只能寫入純文本的數(shù)據(jù)，對于復(fù)制的具有樣式的內(nèi)容，會轉(zhuǎn)換為純文本，而將樣式標(biāo)簽等內(nèi)容過濾掉；

div contenteditable="plaintext-only"/div

二、如果不使用該屬性，可以使用js控制textarea的高度；原理是當(dāng)textarea出現(xiàn)滾動條時(shí)，增加其高度，使?jié)L動條消失。

怎樣判斷是否出現(xiàn)滾動條，其方法是但元素的scrollHeight大于offsetHeight的時(shí)候，即出現(xiàn)了滾動條；

實(shí)現(xiàn)方法如下：

//html

textarea id="text"/textarea

//css

#text{

font-size: 20px;

overflow: hidden;//必須

}

//js

$('#text').on('input',function(){

if(text.scrollHeighttext.offsetHeight){

THeight += 20;//font-size的大小是20，因此每次給textarea的高度增加20px

$('#text').css('height',THeight);

}

})

HTML5里面怎樣自動適應(yīng)手機(jī)屏幕的高度

用 CSS 的媒體查詢器，例如：

@media screen and (min-height: 768px)

{

body { background-color: red; height: 200px; }

}

高度大雨 768px 時(shí)，body 添加一個紅色背景

html5如何設(shè)定高度自適應(yīng)？

代碼如下：

var width = document.documentElement.clientWidth;

//初始化高度

$("#iFrame1").height(width*0.5);

//當(dāng)文檔窗口發(fā)生改變時(shí) 觸發(fā)

$(window).resize(function(){

$("#iFrame1").height(width*0.5);

});

急 html5 中自適應(yīng)高度的DIV 怎么加縱向滾動條

CSS樣式表里面添加overflow ：scroll；當(dāng)內(nèi)容超過設(shè)置的高度時(shí)自動生成縱向滾動條

網(wǎng)頁高度自適應(yīng)

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

script src=""/script

style

*{padding:0; margin: 0; font-size: 12px;}

ul,li{list-style: none;}

.div1{width: 100%;}

.div2{width: 30%; background: orange; height: 300px; float: left;}

.div3{width: 70%; background: green; height: 300px; float: left;}

/style

/head

body

div class="div1"

div class="div2"30%/div

div class="div3"70%/div

/div

script

var cHeight=$(window).height();

$(".div3,.div2").height(cHeight);

/script

/body

/html

這樣就可以自動獲取屏幕的高度，然后再設(shè)置。

html5移動端div的高度怎么設(shè)置自適應(yīng)

在文檔流中，DIV的高度默認(rèn)就是根據(jù)內(nèi)容的高度自適應(yīng)的。

如果是想適配不同設(shè)備的窗口大小，可以設(shè)置百分比?；蛘咄ㄟ^position定位，然后設(shè)置top和bottom值。再或者利用css3的flexbox布局，設(shè)置父級的display為flex，方向?yàn)榭v的，然后設(shè)置其flex：1；

文章名稱：關(guān)于html5高度自適應(yīng)的信息
文章網(wǎng)址：http://sd-ha.com/article44/phhgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、全網(wǎng)營銷推廣、定制網(wǎng)站、服務(wù)器托管、解決方案

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)