html如何继承父元素的高度,css让子元继承父元素的高度

css让子元继承父元素的高度

情景描述：父元素由一个设置了高度的元素撑起，另一个元素自动继承父元素的高，并且两元素在一行显示。

现在情况

style

.far{

border: 1px solid bisque;

}

.s1{

height: 150px;

width: 100px;

background-color: blue;

display: inline-block;

}

.s2{

height: 100%;

width: 50px;

background-color: brown;

display: inline-block;

}

/style

/head

body

div class="far"

div class="s1"/div

div class="s2"/div

/div

/body

方法1：

设置父元素flex，子元素不设置高度

style

.far{

border: 1px solid bisque;

display: flex;

}

.s1{

height: 150px;

width: 100px;

background-color: blue;

display: inline-block;

}

.s2{

width: 50px;

background-color: brown;

display: inline-block;

}

/style

/head

body

div class="far"

div class="s1"/div

div class="s2"/div

/div

/body

方法2：

父元素相当定位，子元素绝对定位，设置100%高

.far{

border: 1px solid bisque;

position: relative;

font-size: 0;

}

.s1{

height: 150px;

width: 100px;

background-color: blue;

display: inline-block;

}

.s2{

width: 50px;

background-color: brown;

display: inline;

position: absolute;

height: 100%;

}

/style

/head

body

div class="far"

div class="s1"/div

div class="s2"/div

/div

/body

s1和s2元素都要设置inline或者inline-block属性，否则不法自动在一行，要在设置left，top等属性

css让子元继承父元素的高度 相关文章

C++:13---继承(单一继承、多重继承、多级继承、菱形继承、虚继承)

一、基类与派生类的概念 基类(父类)：在继承关系中处于上层的类 派生类(子类)：在继承关系中处于下层的类 class A;class B;class C:public A //C为A的子类，A为C的父类{};class D:public A,public B //D为A和B的子类，A和B均为D的父类{}; 二、类派生列表

css重点-grid网格布局

1、 display属性 ：display:grid 指定一个容器采用网格布局 2、 grid-template-rows属性 ：定义每一行的行高 grid-template-columns属性 ：定义每一列的列宽 repeat()：指定行或列的重复次数，以及需要重复的值 auto-fill()：根据容器的大小，尽可能多地放入

【css】单选框和复选框文字垂直居中问题

现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框文字垂直居中对不齐，不过要是字体大小是 14px 的话却完全没有这个问题。下面我整理了下解决方法，总共有 6 种。 !DOCTYPE HTMLhtml lang="en-US"head meta charset="UTF-8" titlecss-checkbox-ra

sqlalchemy 多态 polymorphic 实现单表继承

sqlalchemy 多态 polymorphic 实现单表继承 sqlaclchemy中的单表继续就是以一个模型类为基类，其他模型类继承基类，所有模型类的的数据都存一张表里面(也可以是多张，只不过基类模型类的字段是共享的) 下面建立三个模型类(表) class Human(db.Model): __

Java回形矩阵(数组元素赋值问题)

问题: 从键盘读入一个数，打印出以下特点的矩阵。 如输入3，则输出为： 1 2 3 8 9 4 7 6 5 若输入4，则输出为： 1 2 3 4 12 13 14 5 11 16 15 6 10 9 8 7 显然，该问题应用数组来存储数据，所以重点是找出赋值的规律。从问题中能够看出，矩阵是按顺时针顺序

C++:49---继承中的友元

一、友元在继承中的关系 我们在友元的文章中介绍过，友元关系不能继承。 (1)友元关系不存在传递性，即每个类负责控制自己的友元类或者友元函数； (2)友元关系是单向的，不具有交换性。若类B是类A的友元，类A不一定是类B的友元，要看在类中是否有相应的声

Java 基础 4

继承 Java 中所有的类的祖先都是 Object，在定义类的层次结构时，可以把一些类的相同点抽象出来，作为父类，减少代码重复。 如定义一个 Animal 类： public class Animal { public void roam() { // do some thing System.out.println("Animal roam"); }} 当

前端框架 LayUI 页面元素(几乎为官网示例)

前端框架 LayUI 官网https://www.layui.com/doc/ 栅格布局 div class="layui-container" h2常规布局(以中型屏幕桌面为例)：/h2 div class="layui-row" div class="layui-col-md9" 你的内容 9/12 /div div class="layui-col-md3" 你的内容 3/12 /div /div h

C#知识树整理——C#基础

c#基础 [x] C# 1.0 类(Class) 类可以继承 包含属性 包含方法 可以用来创建对象 类的访问权限 Internal：在打dll的时候作用很大，可以控制有些类不然用户访问到 private：用得不多，一般作为内部类存在 public：这个不用多说懂的都懂 抽象类与接口 抽象类中

CSS实现渐隐渐现效果

CSS实现渐隐渐现效果 实现渐隐渐现效果是比较常见的一种交互方式，通常的做法是控制 display 属性值在 none 和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素消失时具有平滑的效果。 实现 opacity opacity 是用以设置