css布局之高度自适应

最新推荐文章于 2024-06-28 21:22:19 发布

weixin_43743956

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量496

点赞数

分类专栏：布局及样式

本文链接：https://blog.csdn.net/weixin_43743956/article/details/84818903

版权

布局及样式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一：利用绝对定位
一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .top{
            background: red;
            height: 100px;
        }

        .center{
            background: orange;
            position: absolute;
            width: 100%;
            top:100px;
            bottom: 0;
        }
        .outer{
            position: relative;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="outer">
            <div class="top">1</div>
            <div class="center">3</div>
    </div>
    
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 
</script>
</html>

高度自适应，就是同时设置了top和bottom的值。

方法二：利用padding实现
（1）给父元素留padding-top，然后用相对定位，把b定位到顶部，使b的高度与outer设的padding-top一致。

<div class="outer">
    <div class="A"> 头部DIV </div>
    <div class="B">下部DIV </div>
</div>
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%; background: #D9C666; }

（2）使用－margin实现
与（1）类似，但这里没有用定位，用负值margin-top把b往上移

<div class="outer">
    <div class="A">头部DIV</div>
    <div class="B">下部DIV</div>
</div>

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; }

weixin_43743956

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css布局之高度自适应

方法一：利用绝对定位一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的。&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;met
复制链接

扫一扫

专栏目录