Jquery Mobile Div的高度自动调整（或滚动）

您好，这里是我的HTML代码。什么我基本上想的是：Jquery Mobile Div的高度自动调整（或滚动）

1用户粘贴一些内幕textaea ID =“利亚”内容

2，当他点击了一个名为“完成”按钮，textarea的内容asigned到div的内html有id =“tDiv”

3-The Div讨论了应用不同的字体家族的内容（使用css3，它是完美的工作），但当用户的数据变大，股份不能够提供一个滚动条或自动调整它的高度。

请帮助，我已经消耗了许多小时，但我仍然输了！

<!DOCTYPE html> 
<html> 
<head> 
<meta name=viewport content="user-scalable=no,width=device-width" /> 
<link rel=stylesheet href="resources/jquery.mobile.css" /> 
<script src="resources/jquery.js"></script> 
<script src="resources/jquery.mobile.js"></script> 
<style> 
@font-face { 
    font-family: 'Donegal One'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(fontfile.ttf) format('truetype'); 
} 
.hindi, textarea { 

font-family: 'Donegal One', serif !important; 
overflow:auto; 
-webkit-overflow-scrolling:touch; 
} 
</style> 
<script> 

</script> 
</head> 
<body> 
<div data-role=page id=sendMoneyWin data-add-back-btn=true> 
     <div data-role=header data-theme="c" > 
      <h1>Font Changer</h1> 
     </div>  
     <div data-role=content> 
     <script> 

      function transformFont(){ 
       $("#tDiv").html($("#tArea").attr("value")); 
       //$("#tArea").css("display","none"); 
       $("#tArea").prop("readonly",true); 
       $("#tDiv").css("display","block"); 
       $("#doneBtn").css("display","none"); 
       $("#reloadBtn").css("display","inline"); 
      } 
      function clearAllAndReload(){ 
       $("#tDiv").html(""); 
       $("#tArea").attr("value","") 
       //$("#tArea").css("display","block"); 
       //$("#tDiv").css("display","none"); 
       $("#tArea").prop("readonly",false); 
       $("#doneBtn").css("display","inline"); 
       $("#reloadBtn").css("display","none"); 
      } 
     </script> 
     <b>Please paste the contents here, in the below text box :</b><br /> 
     <span id="reloadBtn" style="display:none;"><input type="button" value=" Reload " onClick="clearAllAndReload()" data-inline=true/></span> 
     <span id="doneBtn" ><input type="button" value=" Done " onClick="transformFont()" data-inline=true /></span> 


     <textarea id="tArea" class="hindi" style="" ></textarea> 
     <div id="tDiv" class="hindi" data-scroll='true' style="white-space: pre-wrap;overflow:visible;-webkit-overflow-scrolling:touch;display:none;"></div> 
     </div> 

     <div data-role=footer data-theme="c"> 
      <span style="float:right;"><small>Created & Maintained by TechBhardwaj, 2012&nbsp;&nbsp;&nbsp;</small></span> 
     </div> 
</div> 
</body> 
</html>

来源

2012-12-19 Abhishek

你试过溢出：滚动？ – Luke

这是一个基本的CSS，DIV想表现为重相当大的容器，除非你给它的尺寸。

这会为你工作，删除所有DIV的风格，并将其添加到样式块：

一，添加溢出：滚动股利和从风格删除：

#tDiv { 
    /* SCROLL FIX */ 
    width: 100%; 
    height: 200px; 
    overflow:scroll; 
    /* END FIX */ 
    background: #aabbcc; 
    white-space: 
    pre-wrap; 
    -webkit-overflow-scrolling:touch; 
    display:none;   
}

这将给你一个滚动条。例如：http://jsfiddle.net/Gajotres/DMqX7/

二，使其可调整大小：

#tDiv { 
    /* RESIZE FIX */ 
    width: 100%; 
    height: 200px; 
    min-height: 200px; 
    height:auto !important;   
    /* END FIX */ 
    background: #aabbcc; 
    white-space: 
    pre-wrap; 
    -webkit-overflow-scrolling:touch; 
    display:none;   
}

例子：http://jsfiddle.net/Gajotres/aq8K3/

来源

2012-12-19 08:49:50 Gajotres

Jquery Mobile Div的高度自动调整（或滚动）

回答

相关问题