magin、padding设置百分比问题

最新推荐文章于 2024-04-16 14:44:31 发布

weixin_34354945

最新推荐文章于 2024-04-16 14:44:31 发布

阅读量170

点赞数

原文链接：http://www.cnblogs.com/boykait/p/10024568.html

版权

小示例镇楼

先给出一个很简单的demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                width: 100%;
                height: 100%;
            }
            
            .top {
                width: 100%;
                height: 10%;
                padding-top: 5%;
                background-color: red;
            }
            
            .bottom {
                width: 100%;
                height: 85%;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="top">
        </div>
        <div class="bottom">    
        </div>
    </body>
</html>

问：上面的示例得到的高度正好是屏幕的百分百吗？如果你觉得这是一个low的问题并知道答案，就不用再看啦。

背景描述

我们项目中做了一个类似的事情，给加了一个.top的div加了一个padding-top值，看上面示例，自以为的高度总和：height(top) + padding-top(top) + height(bottom) = 10% + 5% + 85% = 100%正好撑满整个屏幕高度呢，但是实际并不然，高度已经超出了屏幕并产生了滚动条，如下图：

margin、padding百分比

当然，这是在默认的情况 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，当书写模式变成纵向的时候，其百分比将会变成父级元素块的height决定。

为什么要选择宽度做参照而不是高度呢？

这其实更多的要从CSS设计意图上去想，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定（仔细回想一下，如果没有显式的定义宽度或者强制一行显示，都会遇到边界换行，而不是水平延展），垂直方向可以无限延展。但当书写模式为纵向时，其参照就变成了高度而不再是宽度了。

转载于:https://www.cnblogs.com/boykait/p/10024568.html

weixin_34354945

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
magin、padding设置百分比问题

小示例镇楼先给出一个很简单的demo：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> * { margin: 0;...
复制链接

扫一扫