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的高度自動調整（或滾動）

回答

相關問題