css针对height:100%无效果解决方案

TG科技社

于 2024-08-11 15:12:14 发布

阅读量898

点赞数 4

分类专栏：笔记文章标签： html css

本文链接：https://blog.youkuaiyun.com/m0_55699924/article/details/141105983

版权

3 篇文章

订阅专栏

在css中，height:100%通常表示将该元素高度拉伸为父元素高度的100%，
但是有时候不起作用，主要原因就是父元素也没有定义高度
例如下面的代码

<html>
    <body>
        <button style="height:100%">测试</button>
    </body>
</html>

我们运行发现， button 并没有像设想一样铺满高度，这是因为和
没有定义高度，我们只需要往和加入属性 style=“height:100%” 便能成功
改进后的代码

<html style="height:100%">
    <body style="height:100%">
        <button style="height:100%">测试</button>
    </body>
</html>

需要注意的是，html和body的属性width有时会自动填充100%，因此一般不会出现问题

作者后记：因为初学的时候我也被这个问题难住，所以出一篇文章给需要的人