一個div分上下兩部分，上部分高度不固定，下面部分自動填滿剩余高度

劉玉平發(fā)布于2019-08-30 15:55 / 1126人閱讀

摘要：自動填滿剩余高度正常情況自上而下放要放的東西就行了，但是現(xiàn)在有一個需求是這樣的，頭部國定，下面的東西會很多要有滾動條我之前都是頭部固定，給一個就行了但是現(xiàn)在又有一個惡心的需求，整個背景一樣，而會有一些文字，而且沒有背景，這樣滾動的話會從文

div自動填滿剩余高度

html

正常情況自上而下放要放的東西就行了，
但是現(xiàn)在有一個需求是這樣的，頭部國定，下面的東西會很多要有滾動條
我之前都是頭部固定，給wrapper一個overflow-y:hidden就行了
但是現(xiàn)在又有一個惡心的需求，整個wrapper背景一樣，而header會有一些文字，而且沒有背景，這樣滾動的話會從文字縫隙之間看到滾動的內(nèi)容，不雅
總之就要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學(xué)習(xí)鏈接

GPU云服務(wù)器云服務(wù)器 html代碼分兩部分兩部分部分?jǐn)?shù)據(jù) 文字部分

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117327.html

相關(guān)文章

一個div分上下兩部分，上部分高度不固定，下面部分自動填滿剩余高度

摘要：自動填滿剩余高度正常情況自上而下放要放的東西就行了，但是現(xiàn)在有一個需求是這樣的，頭部國定，下面的東西會很多要有滾動條我之前都是頭部固定，給一個就行了但是現(xiàn)在又有一個惡心的需求，整個背景一樣，而會有一些文字，而且沒有背景，這樣滾動的話會從文 div自動填滿剩余高度 html 正常情況自上而下放要放的東西就行了，但是現(xiàn)在有一個需求是這樣的，頭部國定，下面的東西會很多...

xiangchaobin 2019-08-02 14:11 評論0 收藏0
想要清晰的明白（二）CSS 盒模型Block box與Line box

摘要：垂直格式化，有一個很重要的方面是會造成垂直相鄰?fù)膺吘嗪喜ⅲ鉀Q這個的方式見想要清晰的明白一中的部分。參考資料權(quán)威指南第三版為負(fù)值產(chǎn)生的影響和常見布局應(yīng)用布局圣杯布局雙飛翼布局深入理解和的基友關(guān)系深入理解中的行高在上一篇想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用，接下來就詳細(xì)的介紹兩種盒子的具體細(xì)節(jié) Block Box show...

Vicky 2019-08-30 13:03 評論0 收藏0
margin詳解

摘要：屬性指定了盒的區(qū)的寬度。簡寫屬性一次性設(shè)置四周的，而其它屬性只設(shè)置它們各側(cè)的。 margin屬性指定了盒的margin區(qū)的寬度。margin簡寫屬性一次性設(shè)置四周的margin，而其它margin屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換行內(nèi)元素上的豎直margin將不會產(chǎn)生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸只適用于沒有設(shè)定...

stonezhu 2019-08-29 12:25 評論0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮動

摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動屬性，則父元素就會出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會出現(xiàn)意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...

yankeys 2019-08-29 15:10 評論0 收藏0
網(wǎng)站footer沉底效果的三種解決方案

摘要：沉底效果重點(diǎn)代碼總結(jié)以上三種方法都屬于沒什么副作用的，其實(shí)實(shí)現(xiàn)這種沉底效果還有別的實(shí)現(xiàn)方式，但是對其他布局有影響，這里不贅述，之后有了更好的解決方案，再來更新。問題背景很多網(wǎng)站設(shè)計一般是兩個部分，content + footer，content里面裝的是網(wǎng)站主體內(nèi)容，footer里面展示網(wǎng)站的注冊信息等等，因?yàn)榫W(wǎng)站內(nèi)容高度不定的原因，會出現(xiàn)下面兩種情況：1.內(nèi)容較少時，這個foot...

chanjarster 2019-08-26 13:57 評論0 收藏0