有些朋友在用css+div做站的时候，经常会碰到这样一个问题，某个框架在不同的浏览器下会变形或者位置错乱，这该怎么办呢？其实方法很简单，用以下代码就可以解决了：
<html>
<head>
<style>
#myTable{height:100%;border:solid
1px
red;width:100%;}
#top{margin-top:1px;height:100px;border:solid
1px
green}
#down{margin-top:1px;height:89%;border:solid
1px
silver}
#left{height:100%;border:solid
1px
black;margin:1px;width:200px;float:left;}
#right{border:solid
1px
#0aa;margin:1px;height:100%;width:240px;overflow:scroll;
}
</style>
</head>
<body>
<table
id='myTable'>
<tr><td>
<div
id='top'></div>
<div
id='down'>
<div
id='left'></div>
<div
id='right'>
这里是内容
这里是内容容这里是内容
这里是内容
这里是内容
这里是内容
这里是内容
这里是内容这里是内容
这里这里是内容
这里是内容
这里是内容
这里是内容
这里是内容
这里是内容
这里是内容
这里是双线空间是内容
这里这里是内容
这里是内容
这里是内容
这里是内容
这里是内容
这里是内容这里是内容
这里是内容
这里是内容
这里是内容这里是内容
这里这里是内容
这里是内容
这里是内容
这里是内容
这里是内容
这里是内容容这里是内容
这里是内容
这里是内容这里是内容
这里这里是内容
这里是内容
这里是内容
这里是内容
这里是内容
这里是内容容这里是内容
</div>
</div>
</td>
</tr></table>
</body>
</html>
盒子的高度 = content的高度 + padding-top(内上边距)+ padding-bottom(内下边距) + border-top(上边框边框) + border-bottom(下边框)
深入理解CSS盒子模型（The CSS Box Model）
如果了解了盒子模型（box model）的概念，了解它是如何决定某一个元素的最终尺寸的话，会有助理解一个元素如何在网页上定位的。盒子模型主要适用于块级元素。顺便提一个与此相关的概念：行内布局模型（inline layout model）——定义了行内元素是如何定位的，在行内元素格式（InlineFormatting）中有具体说明
盒子的尺寸的计算（Calculating BoxDimensions）
在CSS21中，块级元素只能是矩形形状的。当计算一个块级元素的整体尺寸时，需要同时把内容区域（content area）［注释1］的长宽，连同此元素的外边距，内边距，以及边框都计算在内
可以通过声明宽和高来定义一个元素的内容（content）的宽度和高度。如果没有做任何的声明，宽度和高度的默认值将是自动（auto）
对于浮动（floated）和绝对定位（absolutelypositioned）元素（包括固定定位（fixed）元素）来说， 自动状态的宽度会使generated box收缩到紧贴它内容大小。
我们知道，当我们放置一个块级元素于页面上时，并且不设置它的定位属性（relative，absolute，fixed），即position:static，或者设置了position:relative的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域
其实是这样的。
因为你的main中应该都是float浮动的，所以导致父容量没有高度，这就是著名的浮动劫（呵呵，我自己起的名字）。
简单的办法就是在你main结束的上面加一个空的div并清除浮动，像下面这样
<div id="main">
<div id="mainleft"></div>
<div id="mainright"></div>
<div style="clear:both;"></div>
</div>
或者你也可以用别人已经做好的clear fix来清除，在网上搜索一下就能知道这个著名的方法了。
回答补充：
不用加空的div的方法清除浮动，比较著名的就是clear fix啦。
你在网上搜一下看看。
完整代码如下
/ Clear Fix /
clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
clearfix {
display: inline-block;
}
/ Hide from IE Mac \/
clearfix {
display: block;
}
/ End hide from IE Mac /
/ end of clearfix /
●比如你要清除main的浮动，让main有高度，那就给main加一个class="clearfix"就行了。
在div里面加一些textfield或者label，把属性设为隐藏即可。
回复：其实，一般需要在网页中获取某一个值，或者控制页面的显示样式，我们经常用到隐含域，这是专门处理这类问题而产生的特殊控件，不同于普通的button，label等等。
你的情况主要是控制页面显示，那么用textfield或label最好。空格不推荐：1 太多造成代码混乱。2有的编辑器对空格数目有限制。
如何实现：
在一对<div></div>标签之内，写入label或textfield标记，比如：<label id = 1 visible = false>(里面可以加入大小，宽，高属性) </label>
这只是个例子，xhtml和老式的html语法不太一样。
像这类界面排版的的工作，最好不要手工编码，用可视化工具，直接拖拽即可。
比如：dreamvevavor8，webdesigner等等。
编码的主要精力放在后台的动态功能部分，比如jsp，aspnet，c#。
以上就是关于巧用CSS来控制div自适应浏览器的高度全部的内容，包括:巧用CSS来控制div自适应浏览器的高度、如何计算CSS盒子模型的高度、div+css网页设计高度问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）