我常用的布局

最新推荐文章于 2023-12-24 10:55:20 发布

隶属感

最新推荐文章于 2023-12-24 10:55:20 发布

阅读量138

点赞数

分类专栏： js+html+css

本文链接：https://blog.csdn.net/qq_36445227/article/details/82665009

版权

js+html+css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一个定高,另外一个自适应：

经常遇到一个父级包含两个元素==> 一个定高,另外一个自适应我喜欢这种做法==>

    <style>
html,
body { height: 100%; padding: 0; margin: 0; }

.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }

.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }

    </style>
</head>
<body>
    <div class="outer">
        <div class="A"></div>
        <div class="B"></div>
    </div>
</body>

效果图容器的padding-top设为第一个子集将要占据的高度

,然后再将第一个子级的高度设为父级的padding-top,然后再将第一个子级的margin-top设置为父级的padding-top 的负值,达到刚好占满父级的padding-top的效果,第二个元素直接设置height : 100%就完成的剩余部分的填充.

全屏布局:

在开发后台项目时,后台基本都是长这样:

    <style>
html,body,.parent{height: 100%; overflow: hidden;}
        .top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;}
        .left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;}
        .right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;}
        .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;}

    </style>
</head>
<body>
    <div class="parent">
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>

效果: 上下部分定高 , 左侧部分定宽 ,中间嵌iframe部分,自适应

隶属感

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我常用的布局

一个定高,另外一个自适应：经常遇到一个父级包含两个元素==> 一个定高,另外一个自适应我喜欢这种做法==> <style>html,body { height: 100%; padding: 0; margin: 0; }.outer { height: 100%; padding: 100px 0 0; box-sizing: border-bo...
复制链接

扫一扫

专栏目录