一個(gè)div分上下兩部分，上部分高度不固定，下面部分自動(dòng)填滿剩余高度

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

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

div自動(dòng)填滿剩余高度

html

正常情況自上而下放要放的東西就行了，
但是現(xiàn)在有一個(gè)需求是這樣的，頭部國(guó)定，下面的東西會(huì)很多要有滾動(dòng)條
我之前都是頭部固定，給wrapper一個(gè)overflow-y:hidden就行了
但是現(xiàn)在又有一個(gè)惡心的需求，整個(gè)wrapper背景一樣，而header會(huì)有一些文字，而且沒有背景，這樣滾動(dòng)的話會(huì)從文字縫隙之間看到滾動(dòng)的內(nèi)容，不雅
總之就要header是一個(gè)高度不確定的div，而body自動(dòng)鋪滿剩下的高度

現(xiàn)在有兩種方法，對(duì)于獲取動(dòng)態(tài)高度我傾向于用js
方法一：

var header = document.getElementById("header");
var body = document.getElementById("body");
body.style.height = 800-header.clientHeight+"px";

第二種方法就是只用css來搞定，對(duì)于靈活的布局首先就會(huì)想到flex

方法二：

.wrapper{
    display:flex;
    flex-direction: column;  //豎軸方向
}
.body{
    flex:auto;      //自動(dòng)鋪滿剩余空間
}

flex學(xué)習(xí)鏈接

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117327.html

相關(guān)文章

一個(gè)div分上下兩部分，上部分高度不固定，下面部分自動(dòng)填滿剩余高度

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

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

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

Vicky 2019-08-30 13:03 評(píng)論0 收藏0
margin詳解

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

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

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

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

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

chanjarster 2019-08-26 13:57 評(píng)論0 收藏0