摘要:自動填滿剩余高度正常情況自上而下放要放的東西就行了,但是現(xiàn)在有一個需求是這樣的,頭部國定,下面的東西會很多要有滾動條我之前都是頭部固定,給一個就行了但是現(xiàn)在又有一個惡心的需求,整個背景一樣,而會有一些文字,而且沒有背景,這樣滾動的話會從文
div自動填滿剩余高度
html
</>復制代碼
正常情況自上而下放要放的東西就行了,
但是現(xiàn)在有一個需求是這樣的,頭部國定,下面的東西會很多要有滾動條
我之前都是頭部固定,給wrapper一個overflow-y:hidden就行了
但是現(xiàn)在又有一個惡心的需求,整個wrapper背景一樣,而header會有一些文字,而且沒有背景,這樣滾動的話會從文字縫隙之間看到滾動的內容,不雅
總之就要header是一個高度不確定的div,而body自動鋪滿剩下的高度
現(xiàn)在有兩種方法,對于獲取動態(tài)高度我傾向于用js
方法一:
</>復制代碼
var header = document.getElementById("header");
var body = document.getElementById("body");
body.style.height = 800-header.clientHeight+"px";
第二種方法就是只用css來搞定,對于靈活的布局首先就會想到flex
方法二:
</>復制代碼
.wrapper{
display:flex;
flex-direction: column; //豎軸方向
}
.body{
flex:auto; //自動鋪滿剩余空間
}
flex學習鏈接
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/117327.html
摘要:自動填滿剩余高度正常情況自上而下放要放的東西就行了,但是現(xiàn)在有一個需求是這樣的,頭部國定,下面的東西會很多要有滾動條我之前都是頭部固定,給一個就行了但是現(xiàn)在又有一個惡心的需求,整個背景一樣,而會有一些文字,而且沒有背景,這樣滾動的話會從文 div自動填滿剩余高度 html 正常情況自上而下放要放的東西就行了,但是現(xiàn)在有一個需求是這樣的,頭部國定,下面的東西會很多...
摘要:垂直格式化,有一個很重要的方面是會造成垂直相鄰外邊距合并,解決這個的方式見想要清晰的明白一中的部分。參考資料權威指南第三版為負值產(chǎn)生的影響和常見布局應用布局圣杯布局雙飛翼布局深入理解和的基友關系深入理解中的行高 在上一篇想要清晰的明白(一): CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用,接下來就詳細的介紹兩種盒子的具體細節(jié) Block Box show...
摘要:包裹性所謂包裹性,其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節(jié)中,如果子元素設置浮動屬性,則父元素就會出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個屬性,在實際工作中使用的非常多,如果使用不當就會出現(xiàn)意料之外的效果。雖然很多人說浮動會用就行、浮動過時了,但是對于優(yōu)秀的前端開發(fā)人員,需要有刨根問底的精神,...
摘要:沉底效果重點代碼總結以上三種方法都屬于沒什么副作用的,其實實現(xiàn)這種沉底效果還有別的實現(xiàn)方式,但是對其他布局有影響,這里不贅述,之后有了更好的解決方案,再來更新。 問題背景 很多網(wǎng)站設計一般是兩個部分,content + footer,content里面裝的是網(wǎng)站主體內容,footer里面展示網(wǎng)站的注冊信息等等,因為網(wǎng)站內容高度不定的原因,會出現(xiàn)下面兩種情況:1.內容較少時,這個foot...
閱讀 3701·2021-11-19 09:56
閱讀 1490·2021-09-22 15:11
閱讀 1143·2019-08-30 15:55
閱讀 3386·2019-08-29 14:02
閱讀 2927·2019-08-29 11:07
閱讀 448·2019-08-28 17:52
閱讀 3182·2019-08-26 13:59
閱讀 447·2019-08-26 13:53