一个高度自适应的div,里面有两个div,一个div高度为100px,另一个填满剩余的高度

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhang070514/article/details/83869338

html代码如下

	<div class="main">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>

第一种方式,利用定位

	  html,body{
			height: 100%;
			margin:0px;
			padding:0px;
		}
		.main{
			position: relative;
			height: 100%;
		}
		.box1{
			height: 100px;
			background-color: red;
		}
		.box2{
			position: absolute;
			width: 100%;
			top: 100px;
			bottom: 0px;
			background-color: blue;
		}

第二种方式,同样是定位,不过需要对main设置box-sizing: border-box;

		 .main{
			position: relative;
			height: 100%;
			padding-top: 100px;
			box-sizing: border-box;
		}
		.box1{
			position: absolute;
			top: 0px;
			height: 100px;
			width: 100%;
			background-color: red;
		}
		.box2{
			height: 100%;
			background-color: blue;
		}

第三种方式,利用css3的计算属性calc,css代码最少。

		.main{
			height: 100%;
		}
		.box1{
			height: 100px;
			background-color: red;
		}
		.box2{
			height: calc(100% - 100px);
			background-color: blue;
		}

`

展开阅读全文

一个div高度的问题

02-03

我在用PHP试做一个留言板rn在IE浏览器下的布局效果基本上合我的意思差不多,就是差一些修正,暂时不管它rn我要解决的是,它为什么在火狐浏览器里面一个留言的区域会占那么长rn我如何才能让一个留言的 .MsgOut 自动根据.UserInfo或者.MsgContent的高度来自动调节?rn我知道大概是因为我在 .UserInfo设置了height:100% ,而它却继承了上一层的高度,上一层又继承了再上一层的高度..MsgOut就继承了body的一个屏幕高度,导致一个MsgOut向下被继承了这个高度,所以占满屏rn但IE浏览器会在这方面做到自动根据内容来缩放高度,我不知怎么解决才好..理论上火狐是彻底遵循了CSS规则,但是我却不知道怎样才能让它不占一屏,当然给它一个height的固定值是可以的,然而我却无法预计用户留言的时候会留多少内容,比如他会留言一大堆话怎么办?那就可能超出了固定高度,所以我认为,单个用户的留言显示区域首先将就用户信息或者留言内容div的内容高度来确定自己的高度,请大家指点一下,谢谢.rnrnrn以下是输出的HTML代码rn---------------------------rnrnrnrnrn KK留言板rn rn rnrnrn rn rn rn rn 用户名rn rn 密码rn rn rn rn rn rn rn rn 欢迎您来到KK的留言板^-^ 有什么事要留言给他的,请在此写下信息吧!rn rn rn 大家的留言 rn rn rn rn rn A同学rn rn rn KK你好 rn rn 2012-02-02 21:02:14 rn rn rn rn rn rn rn rn rn rn B同学rn rn rn KK你也好 rn rn 2012-02-02 21:02:27 rn rn rn rn rn rn rn rn rn rn C同学rn rn rn 我来顶你了! rn rn 2012-02-02 21:50:20 rn rn rn rn rn rn rn rn rn rn D同学rn rn rn 念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经rn 念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经rn 念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经 rn rn 2012-02-02 22:23:16 rn rn rn rn rn rn rn rn rn rn E同学rn rn rn 插队 rn rn 2012-02-02 22:23:41 rn rn rn rn rn rn rn 请填写留言信息rn rn rn 名称:rn rn rn rn 留言内容:rn rn rn rn rn rn rn rnrnrn 论坛

没有更多推荐了,返回首页