css控制元素高度自适应

魏宪会发布于2019-04-23 11:43 / 1954人阅读

摘要：可以采用元素定位的方式使特定元素高度自适应。样式我是头部信息我要高度自适应效果如下注如果需要使用底部，只需在底部加上对应定位元素然后用父级元素的进行控制即可。

可以采用元素定位 + 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>

效果如下：

注：如果需要使用底部，只需在底部加上对应定位元素然后用父级元素的padding进行控制即可。

GPU云服务器云服务器高度自适应 textarea自适应高度 iframe高度自适应 iframe自适应高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1052.html

面试题CSS盒子模型，左右固定宽度，中间自适应的五种死法

摘要：优点相比之前布局更具有灵活性缺点脱离文档流，下面的元素都受影响。面试题目假设高度已知，请写出三栏布局，左右300px，中间自适应 showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有几种方法呢？最容易的应该想到利用float来写，代码如下 css样式代码，以下五种都是用一个样式代码 ...

leanxi 2019-08-29 17:22 评论0 收藏0
CSS || 三栏布局，两边固定，中间自适应

摘要：实现基于纯实现的三栏布局需要将中间的内容放在结构的最后，否则右侧会沉在中间内容的下侧原理元素浮动后，脱离文档流，后面的元素受浮动影响，设置受影响元素的值即可两边固定宽度，中间宽度自适应。 1 float实现基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧原理：元素浮动后，脱离文档流，后面的元素受浮动影响，设置受影响元素的margi...

pcChao 2019-08-29 12:12 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮动

摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

yankeys 2019-08-29 15:10 评论0 收藏0
PC端CSS布局汇总

摘要：因为端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对端的布局进行讲解，以下代码只写关键代码。为了提高网页性能，考虑到，表格元素尽量少用，有其他选择的情况尽量用其他布局。前言此文章是解剖CSS布局原理的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对P...

zhangxiangliang 2019-08-29 13:55 评论0 收藏0