首页 >web前端 >css教程 > 正文

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

原创2021-04-29 17:05:400346

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中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:css 高度自适应
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息
    推荐视频教程
  • 传智播客、黑马CSS3基础、加强与进阶传智播客、黑马CSS3基础、加强与进阶
  • 千锋PHP-CSS入门及应用视频教程千锋PHP-CSS入门及应用视频教程
  • CSS3精讲视频教程CSS3精讲视频教程
  • HTML/CSS技术小知识每日分享HTML/CSS技术小知识每日分享
  • CSS 代码实例CSS 代码实例
  • 视频教程分类