父div随着子div大小改变而改变，div的自适应

最新推荐文章于 2024-07-25 10:18:55 发布

左初秋

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量9.3k

点赞数 7

文章标签： css html

本文链接：https://blog.csdn.net/yosongoo/article/details/112197946

版权

父div随着子div的大小变化而改变

重要代码

min-height
overflow

代码讲解

min-height：设置div最小高度；
overflow：设置div大小自适应；

全部代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0 auto;
        padding: 0;
    }
    .min{
        background-color: #80aecc;
        width: 90%;
        min-height: 500px;
        overflow: auto;
    }
    .one{
        background-color: #CCCCCC;
        width: 100px;
        min-height: 200px;
        float: left;
        overflow: auto;
    }
</style>
<html>
<body>
<div class="min">
    父div
        <div class="one">
            子div
            <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
            <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
            <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
        </div>
    </div>
</body>
</html>

运行结果

当子div内容小于最小高度时：
当子div内容很少时的效果

当子div内容大于最小高度时：
当子div内容很多时的效果

总结

要使父div的大小随着子div的大小而改变需要设置父div窗口自适应。子div需要设置最小高度与自适应且子div的不能设置正常高度。

左初秋

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
父div随着子div大小改变而改变，div的自适应

父div随着子div的大小变化而改变重要代码min-heightoverflow代码讲解min-height：设置div最小高度；overflow：设置div大小自适应；全部代码<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ margin: 0 a
复制链接

扫一扫