强制实现子元素高度自适应屏幕高度

最新推荐文章于 2023-06-29 08:43:53 发布

kemisama

最新推荐文章于 2023-06-29 08:43:53 发布

阅读量220

点赞数 1

文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/kemisama/article/details/126642612

版权

本文深入探讨了CSS中的`.fa`、`.son`和`.sun`类选择器在绝对定位和相对定位中的应用。通过实例展示了如何使用百分比实现元素大小随窗口调整而变化的效果，强调了`top`、`bottom`属性在布局中的作用，帮助开发者更好地理解和掌握CSS布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>

    <style>
        .fa{
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
        .son{
            width:90%;
            position: absolute;
            /* 如果son盒子上边还有其他内容，top值要留出距离父盒子顶部其他内容的px值 */
            top: 0;
            /* bottom值同理，也可以用百分比表示距底部留出空白的值 */
            bottom: 0;
        }
        /* 之盒子当中的sun盒子高度问题，只需要用百分比选择，就可以实现与子盒子一起变化的效果 */
    </style>

</head>
<body>

    <div class="fa">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>

</body>