父元素设置指定高度，而子元素高度大于父元素问题

最新推荐文章于 2024-10-01 17:17:19 发布

Tand.

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量1.9k

点赞数

分类专栏：笔试题文章标签：前端

本文链接：https://blog.csdn.net/weixin_45847735/article/details/121556798

版权

笔试题专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文通过一个HTML示例探讨了CSS布局中，当子元素高度超过父元素设定高度时，父元素高度是否会自动调整的问题。结果显示，即使子元素高度大于父元素，父元素的高度仍保持其设定值，不会因子元素高度变化而变化。

摘要由CSDN通过智能技术生成

父元素设置指定高度，而子元素高度大于父元素，是否父元素高度会发生变化：
答案：不会，父元素高度依然等于父元素设置的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1{
            height: 100px;
            background-color: green;
        }
        #d2{
            height: 180px;
            width: 100px;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div id="d1">
        我是父元素，颜色为绿色
        <div id="d2">
            我是子元素，颜色为黄色
        </div>
    </div>
</body>
</html>

在这里插入图片描述