顶部(左侧)元素固定高度(宽度)，内容(下方/右侧)元素撑满剩余高度(宽度)

53 阅读 0 评论 35 点赞

我是靠谱客的博主腼腆猫咪，最近开发中收集的这篇文章主要介绍顶部(左侧)元素固定高度(宽度)，内容(下方/右侧)元素撑满剩余高度(宽度)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最新更新时间：2019年08月12日10:42:15

`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`

本文内容：css布局相关知识

顶部元素固定高度，下方内容元素撑满剩余高度

dom结构如下

<body>
	<div id="parent">
	    <div id="child1"></div>
	    <div id="child2"></div>
	</div>
</body>

预期效果，如下图
方案一：父元素设置padding-top，上元素和下元素设置相对定位，下元素设置高度100%

<style>
#parent{
    width: 100px;
    height: 150px;
    border: 1px solid black;
    padding-top: 30px;
}
#child1{
    height: 30px;
    background: #4169E1;
    position: relative;
    top: -30px;
}
#child2{
    background: #FF69B4;
    height: 100%;
    position: relative;
    top: -30px;
}
</style>

方案二：父元素设置padding-top，上元素设置margin-top，下元素设置高度100%

<style>
#parent{
    width: 100px;
    height: 150px;
    border: 1px solid black;
    padding-top: 30px;
}
#child1{
    height: 30px;
    background: #4169E1;
    margin-top: -30px;
}
#child2{
    background: #FF69B4;
    height: 100%;
}
</style>

方案三：下元素设置绝对定位且不设置高度

<style>
#parent{
    width: 100px;
    height: 150px;
    border: 1px solid black;
    position: relative;
}
#child1{
    height: 30px;
    background: #CCFF33;
}
#child2{
    background: #fc9153;
    position: absolute;
    top: 30px;
    left: 0;
    bottom: 0;
    right: 0;
}
</style>

方案四：下元素使用css函数calc()动态设置高度

<style>
#parent{
    width: 100px;
    height: 150px;
    border: 1px solid black;
}
#child1{
    height: 30px;
    background: #4169E1;
}
#child2{
    background: #FF69B4;
    height: calc(100% - 30px);
}
</style>

方案五：整体使用flex布局

<style>
#parent{
    width: 100px;
    height: 150px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
}
#child1{
    width: 100%;
    flex-basis: 30px;
    background: #4169E1;
}
#child2{
    background: #FF69B4;
    flex: 1;
    width: 100%;
}
</style>

左侧元素固定宽度，右侧内容元素撑满剩余宽度

dom结构如下

<body>
	<div id="parent">
	    <div id="child1"></div>
	    <div id="child2"></div>
	</div>
</body>

预期效果，如下图
方案一：左元素设置左浮动，右元素设置margin-left

<style>
#parent{
    width: 150px;
    height: 100px;
    border: 1px solid black;
    margin: 400px;
}
#child1{
    width: 30px;
    height: 100%;
    background: #4169E1;
    float: left;
}
#child2{
    background: #FF69B4;
    height: 100%;
    margin-left: 30px;
}
</style>

方案二：左右元素设置为行内块元素，右元素使用css函数calc()动态设置宽度

<style>
#parent{
    width: 150px;
    height: 100px;
    border: 1px solid black;
    font-size: 0;/* 消除inline-block元素的横向间距 */
}
#child1{
    width: 30px;
    height: 100%;
    background: #4169E1;
    display: inline-block;
}
#child2{
    background: #FF69B4;
    width: calc(100% - 30px);
    height: 100%;
    display: inline-block;
}
</style>

方案三：左元素左浮动，右元素创建BFC

<style>
#parent{
    width: 150px;
    height: 100px;
    border: 1px solid black;
}
#child1{
    width: 30px;
    height: 100%;
    background: #4169E1;
    float: left;
}
#child2{
    background: #FF69B4;
    height: 100%;
    overflow: hidden;/* 创建块级格式化上下文：具有overflow 且值不是 visible 的块元素*/
}
</style>

方案四：整体使用flex布局

<style>
#parent{
    width: 150px;
    height: 100px;
    border: 1px solid black;
    display: flex;
}
#child1{
    flex-basis: 30px;
    height: 100%;
    background: #4169E1;
}
#child2{
    background: #FF69B4;
    height: 100%;
    flex: 1;
}
</style>