丢开height属性，让div自适应

最新推荐文章于 2024-07-21 20:52:32 发布

Ariel_ckr

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量3.9w

点赞数

分类专栏： html+css+js+框架

本文链接：https://blog.csdn.net/ariel_201311/article/details/79561885

版权

html+css+js+框架专栏收录该内容

36 篇文章 3 订阅

订阅专栏

早初，当我们设计某些板块内容时，我们总会给它一个height值，让它刚好适合内容大小，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    .con{
        height: 100px;
        width: 400px;
        background-color: #9fcdff;
        color: black;
    }
</style>
<body>
<div class="con">
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
</div>
</body>
</html>

然而在设计的过程中，我们难免会遇到代码内容临时修改的现象，比如我们再在div里增加多了几个<p>标签内容：

<div class="con">
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
    <p>好好学习天天向上</p>
</div>

这时的运行起来就会超出div的height值，我们还要重新修改height长度的话，就会过于麻烦。

有没有什么办法可以让长度随着内容的多少进行自适应呢?

.con{
   /* height: 100px;*/
    padding-bottom: 10px;
    width: 400px;
    background-color: #9fcdff;
    color: black;
}

很简单，这里我们只需要把height属性去掉，给它一个padding-bottom的值，就可以了。

这样，无论我们的内容增加了还是减少了，div的长度都会自适应的，是不是简单轻松多了。
个人实战参考网站：https://www.aiadmin.com/user/reg_5.html

Ariel_ckr

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
10
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录