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

男娘i 2021-11-01 15:54 341阅读 0赞

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

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

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

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

*  dom结构如下

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

*  预期效果，如下图  
    ![在这里插入图片描述][20190812104340220.png]
 *  方案一：父元素设置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>

*  预期效果，如下图  
    ![在这里插入图片描述][20190812105405375.png]
 *  方案一：左元素设置左浮动，右元素设置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>

#### 参考资料 ####

*  无

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[20190812104340220.png]: /images/20211101/8dbf0fc6369f4d048afceba3d07584e2.png
[20190812105405375.png]: /images/20211101/a17ba53b309d4544a42257cb780946a7.png
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460

发表评论取消回复

表情：

评论列表（有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

相关两列布局——左侧宽度固定，右侧宽度自适应的实现方法

左侧宽度固定，右侧宽度自适应的实现方法方法一：左浮动+margin-left 让两个元素在同一行显示首先想到的就是浮动，首先可以让左侧元素浮动,使其脱离文档流...

今天药忘吃喽~/ 2024年04月19日 13:30/ 0 赞/ 95 阅读

相关 JS--获取元素的高度与宽度

原文网址：[JS--获取元素的高度与宽度\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN] 简介说明本文介绍如何使用JavaScript获取HT

港控/mmm°/ 2024年03月30日 12:24/ 0 赞/ 85 阅读

相关 css3动态计算元素的高度及宽度

[css3动态计算元素的高度及宽度][css3] 1、px 　　像素，我们在网页布局中一般都是用px。 2、百分比　　百分比一般宽泛的讲是相对

待我称王封你为后i/ 2023年07月24日 02:09/ 0 赞/ 16 阅读

相关 css实现根据元素自适应宽度设定高度

需求描述： wap页面展现一张banner图片，要求其宽度为页面的宽度（屏幕宽度），高度为宽度的3/5。 css实现： js实现方式很简单，就不做介绍了；这里我们说下

桃扇骨/ 2023年02月22日 08:14/ 0 赞/ 32 阅读

相关 UNI-APP_uni-app获取屏幕高度宽度、元素的高度宽度

uni.getSystemInfo(OBJECT) [官方文档][Link 1] 获取屏幕高度宽度 screenWidth 屏幕宽度 screenHe

矫情吗；*/ 2022年12月29日 06:53/ 0 赞/ 786 阅读

相关【VUE系列】获取元素宽度高度等

获取元素宽度给元素绑定个 ref 如 <div ref="divWidth">测试</div> 使用函数获取 //可以输出如下对象，查找到宽度cl

矫情吗；*/ 2022年10月15日 14:54/ 0 赞/ 314 阅读

相关 html的元素高度如何计算,如何检索HTML元素的实际宽度和高度？

以防万一它是有用的人，我把一个文本框，按钮和DIV都具有相同的CSS ： width:200px; height:20px; border:solid 1px \000;

港控/mmm°/ 2022年10月10日 11:20/ 0 赞/ 188 阅读

相关高度和宽度不固定元素水平和垂直居中的实现（父元素高度和宽度固定）（完美解决兼容问题）

.parent\{ width:500px; height:400px; border:1px solid \ddd; borde-radius:10px; disp

r囧r小猫/ 2022年07月28日 04:05/ 0 赞/ 185 阅读

相关 ImageView宽度填满屏幕，高度自适应

> 原文链接：[http://blog.csdn.net/easion\_zms/article/details/50263409\comments][http_blog.cs

你的名字/ 2022年06月17日 04:45/ 0 赞/ 313 阅读

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

最新更新时间：2019年08月12日10:42:15 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：css布局相关知识顶部

男娘i/ 2021年11月01日 15:54/ 0 赞/ 342 阅读