• 技术文章 >web前端 >css教程

    css如何设置元素高度自适应

    coldplay.xixicoldplay.xixi2021-04-29 17:05:40原创403

    css设置元素高度自适应的方法是采用元素定位及padding的方式使特定元素高度自适应,代码为【position: relative;padding: 60px 0 0;】。

    本教程操作环境:windows7系统、css3版,DELL G3电脑。

    css设置元素高度自适应的方法:

    可以采用元素定位 + padding 的方式使特定元素高度自适应。

    css 样式:

    html,body{
        height:100%;
        margin:0;
        padding:0;  
    }
    .wrap {
        height:100%;
        box-sizing: border-box ; 
        position: relative;
        padding: 60px 0 0;   
    }
    .header {
        height: 60px;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .content {
        height:100%;
    }

    html:

    <div class="wrap">
            <div class="header">
                我是头部信息
            </div>
            <div class="content">
                我要高度自适应
            </div>
        </div>

    效果如下:

    d6a39a7274ef2e51416c9f84955ea3a.png

    相关教程推荐:CSS视频教程

    以上就是css如何设置元素高度自适应的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 高度自适应
    上一篇:css怎么设置边框线样式 下一篇:css如何设置div不换行
    线上培训班

    相关文章推荐

    • css设置边框的属性有哪些• 如何让css样式失效• css background为什么不显示• 如何使用css让背景图片不重复

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网