Web Demo Mobile Demo Angular Demo Vue Demo React Demo

Auto Height for Tabs

The tabs height is auto adjusted according to tab panel content.

jQuery EasyUI framework helps you build your web pages easily.

  • easyui is a collection of user-interface plugin based on jQuery.
  • easyui provides essential functionality for building modem, interactive, javascript applications.
  • using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
  • complete framework for HTML5 web page.
  • easyui save your time and scales while developing your products.
  • easyui is very easy but powerful.
    This is the help content.
    源代码
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Auto Height for Tabs - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>Auto Height for Tabs</h2>
    	<p>The tabs height is auto adjusted according to tab panel content.</p>
    	<div style="margin:20px 0;"></div>
    	<div class="easyui-tabs" style="width:700px;height:auto">
    		<div title="About" style="padding:10px">
    			<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
    			<ul>
    				<li>easyui is a collection of user-interface plugin based on jQuery.</li>
    				<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
    				<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
    				<li>complete framework for HTML5 web page.</li>
    				<li>easyui save your time and scales while developing your products.</li>
    				<li>easyui is very easy but powerful.</li>
    			</ul>
    		</div>
    		<div title="My Documents" style="padding:10px">
    			<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
    		</div>
    		<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
    			This is the help content.
    		</div>
    	</div>
    </body>
    </html>