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

xiangchaobin 發布于2019-08-02 14:11 / 3914人閱讀

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

div自動填滿剩余高度

html

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

現在有兩種方法，對于獲取動態高度我傾向于用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學習鏈接

GPU云服務器云服務器 html代碼分兩部分兩部分部分數據文字部分

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53629.html

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

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

劉玉平 2019-08-30 15:55 評論0 收藏0
想要清晰的明白（二）CSS 盒模型Block box與Line box

摘要：垂直格式化，有一個很重要的方面是會造成垂直相鄰外邊距合并，解決這個的方式見想要清晰的明白一中的部分。參考資料權威指南第三版為負值產生的影響和常見布局應用布局圣杯布局雙飛翼布局深入理解和的基友關系深入理解中的行高在上一篇想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用，接下來就詳細的介紹兩種盒子的具體細節 Block Box show...

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

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

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

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

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

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

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