沒有高度的div中的子元素高度自動撐開

2022-04-30 20:42:14 字數 1316 閱讀 5131

直接上**:

很多時候

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

/*沒有高度的div

*/.box

/*定位在左邊的偽類

*/.box:after

/*設定top 和 bottom 讓高度撐開

*/.box>span

/*文字中劃線 拓展 margin:auto 0 上下垂直居中 left right設定左右距離, top bottom上下距離一致

*/

.box:before

style

>

head

>

<

body

>

<

div

class

="box"

>高度不確定,padding撐開的,還有偽類<

span

>

span

>

div>

<

div

class

="box"

>高度不確定,padding撐開的,還有偽高度不確定,padding撐開的,還有偽類高度不確定,padding撐開的,還有偽類高度不確定,padding撐開的,還有偽類類

都會遇到    高度不確定的父元素,   子元素又是定位的,   讓子元素撐開的時候

子元素div高度不確定時父div高度如何自適應

點評 每當進行頁面布局時,我們都有這樣的需求,就是當子元素div高度不確定時父div自適應高度,本文整理的多種方法可以解決此問題,感興趣的朋友可以參考下 在最外層div加以下樣式 height 100 overflow hidden 其它方法 div即父容器不根據內容自適應高度,我們看下面的 複製 ...

div根據父元素根據子元素高度自適應高度

切圖時經常遇見一種問題 父級的div高度為0,導致後面緊跟著的元素串位。特別是在使用bootstrap布局的時候 以前都是通過該margin調整 兩種情況 無特殊說明子元素都是指代父元素的第一級子元素 第一種 若子元素沒有帶有float元素的元素,對於高度是自適應的沒有問題.第二種 若子元素全是帶有...

CSS 元素的高度,元素高度自適應螢幕高度

元素的高度預設是auto,被內容自動撐開 100 使得html的height與螢幕的高度相等 50 使得html的height等於螢幕的一半 若想讓乙個的高度與螢幕高度自適應,始終充滿螢幕,需要從html層開始層層新增height 100 元素沒有 margin和padding 元素有margin ...