高度自適應

2022-07-29 08:18:11 字數 1078 閱讀 5297

1.高度不去設定,或者高度設定auto  內容撐開父元素的高度。

2.內容撐開父元素的高度 -> 最小高度的設定 min-height

3.浮動元素新增高度自適應 -> 新增浮動元素的父元素沒有高度,會出現高度塌陷

(1)給出現高度塌陷的元素新增:overflow:hidden;

原理:overflow:hidden;觸發了乙個 bfc(布局邏輯)

bfc規定:計算bfc高度時候,浮動元素也參與計算。

弊端:隱藏掉定位在當前元素外圍的內容。

​(2)在浮動元素的下方(同級)新增乙個空的div,給div設定樣式div

原理:新增的空div新增了clear:both;忽略上方同級新增浮動的元素留出的空間。在父元素最底下顯示,撐     開父元素高度。

弊端:形成**的冗餘(出現高度塌陷,新增乙個div)

​(3)萬能清除法:

.clear_fix:after

.clear_fix

讓子元素高度隨著父元素高度進行改變。
前提條件:

body,html

clear:both; 當前元素會忽略上方新增浮動的元素 留出來的空間。

(閉合浮動)

clear的屬性值:

clear:left

clear:right

clear:both

1.元素選擇符::after

說明: 在某個元素的後面用css的形式新增內容(、文字)。

2.元素選擇符::before

說明: 在某個元素的前面用css的形式新增內容(、文字)。

​3.元素選擇符::first-letter

說明:控制第乙個字元的樣式

4.元素選擇符::first-line

說明:控制第一行的樣式

display:none;

​將元素徹底隱藏,不再佔據空間

visibility:hidden;

​將元素隱藏,佔據空間,在頁面上留下一片空白

高度自適應

開發中遇到乙個問題,要求不管在多高的螢幕下,什麼都行 到底部的距離都應該和psd一致,flash裡面的問題 定義寬度 var psdwidth 750 定義高度 var psdheight 1448 獲取手機螢幕寬度 var w window.innerwidth document.document...

iframe 自適應高度

由於html沒有include或require,做網頁時我們會用iframe來達到包含頁面的目的。如果呼叫的iframe頁面高度會根據內容多少而發生變化,這時通常要保持iframe與內容頁面的高度,以避免出現iframe的滾動條。先搜尋了一下,有不少好的例子,但總覺得說的還不夠明了。下面給出詳細例子...

iframe自適應高度

來自 http ued.koubei.com 2008 05 07 iframe auto fit height 這貼比較長,沒有耐性的朋友請直接拖到帖子末尾的 示例,或者直接去玩我提供的demo。demo頁面 主頁面 iframe a.html 被包含頁面 iframe b.htm 和 ifram...