html页面高度随内容自动增高解决方法-HTML教程-爱易网页

html页面高度随内容自动增高解决方法

日期：2014-05-16　浏览次数：20947 次

html页面高度随内容自动增高
请教大家，怎么让网页的高度随着内容的增加而自动增高，如csdn这里的论坛发帖一样，我回复一条，页面就增高一部分，请问大家这是怎么实现的，求指教，谢谢！
------解决方案--------------------
本身父级就是有子集元素高度撑开的，可以看如下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{font-size:16px;}

ul{margin:0;padding:0;}

li{list-style:none; vertical-align:top;}

.cf:after{content:'';display:block;clear:both;}

.cf{zoom:1;}

.list{width:980px; margin:0 auto;}

.list li{height:50px;border:solid 2px #06F; text-align:center;line-height:50px;margin-bottom:20px;}

</style>

<script>

window.onload=function(){

	var oBtn=document.getElementById('btn');

	var oUl=document.getElementById('list') ;

	var i=0;

	oBtn.onclick=function(){

		var li = document.createElement('li');

		li.innerHTML=i++;

		oUl.appendChild(li);

	}

}

</script>

</head>



<body>

<p>点击按钮添加记录</p>

<input type="button"  id="btn" value="添加"/>

<ul class="list" id="list">

</ul>

</body>

</html>

------解决方案--------------------
高度自动增高一般不需要你做什么内容多了自动就高了…

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

html页面高度随内容自动增高解决方法

相关资料更多>

推荐阅读更多>