200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html div 自动适应屏幕 css怎么让高度自适应屏幕高度?

html div 自动适应屏幕 css怎么让高度自适应屏幕高度?

时间:2022-02-21 06:20:40

相关推荐

html div 自动适应屏幕 css怎么让高度自适应屏幕高度?

在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度。下面我们来看一下css设置高度自适应屏幕高度的方法。

首先,我们刚开始设计某些网页板块时,总会给其一个height高度值,让它刚好适合内容大小。

示例:

Title

.con{

height: 100px;

width: 400px;

background-color: #9fcdff;

color: black;

}

html中文网

html中文网

html中文网

效果图:

给其一个height高度值这种方法在你增加内容时,就会出现下面这种情况:

这就是所谓的高度不适应,也就是css高度无法根据内容实现自适应,那我们如何来实现css高度根据内容自适应呢?

其实很简单,这里我们只需要把height属性去掉,给它一个padding-bottom的值。那么,css高度就会根据内容来实现自适应。

padding-bottom属性设置元素的下内边距(底部空白)。

我们来看一下具体的高度自适应实现代码:

Title

.con{

padding-bottom:1cm;

width: 400px;

background-color: red;

color: black;

}

html中文网

html中文网

html中文网

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。