css - 高度浮動滿版 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

css - 高度浮動滿版

css javascript

Zaku 2019-01-23 15:07:33 ‧ 9647 瀏覽

分享至

假定分成a,b,c三個區塊，body為最外層，隨視窗變化height:100%，a與c為頭尾，固定某一高度，b能浮動撐開剩餘的高度?如果只有一個b用js抓去分配還好，但要是結構複雜時區塊很多，感覺不是太好的方式。像三個區塊計算大概是b=全高-a-b;，一直去算這個感覺不是太好的方式?

 <style>
   html {
       height:100%; 
   }
   body{
      height:100%; 
       margin: 0px;
   }
   .a{
       width:100%;
       height: 40px;
       background-color: aquamarine;
   }
   .b{
       background-color: rgb(255, 127, 127);
   }
   .c{
       width:100%;
       height: 40px;
       background-color: rgb(255, 127, 212);
   }
  <style>

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

fillano iT邦超人 1 級 ‧ 2019-01-23 17:46:29 檢舉

.b {height: calc(100%-40px-40px);}

Wang.W iT邦新手 5 級 ‧ 2019-01-24 02:37:57 檢舉

我路過插個話，calc()有個缺點，如果有需要搭配transition效果的話，在EDGE瀏覽器裡會無法正常運作。

Zaku iT邦新手 3 級 ‧ 2019-01-24 09:54:54 檢舉

感謝兩位大大

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

watercool

iT邦新手 5 級 ‧ 2019-01-23 15:40:46

最佳解答

https://jsfiddle.net/6Lxgz918/
這樣是你要的嗎?

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

Zaku iT邦新手 3 級 ‧ 2019-01-24 09:54:00 檢舉

應該是喔，感謝大大，原來flex:1;可以單獨使用在一個區塊，有再想設flex但因為不是每個區塊都要設比例，所以想說可能不適用。還以為可能也會炸出去100%的高度，我再試試看會不會有其他副作用

Zaku iT邦新手 3 級 ‧ 2019-01-24 10:24:11 檢舉

flex-direction: column;的作用是讓flex的延展變成上下的?

watercool iT邦新手 5 級 ‧ 2019-01-24 13:10:20 檢舉

flex-direction控制方向，他有六個值你可以上下面網址看看
https://www.w3schools.com/cssref/css3_pr_flex-direction.asp

Zaku iT邦新手 3 級 ‧ 2019-01-24 13:30:58 檢舉

嗯嗯我是說我以為只是排列的方向，所以也會影響延伸的方向

登入發表回應

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2019-01-23 16:32:40

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-item:nth-of-type(1) {
  flex-grow: 1;
}

.flex-item:nth-of-type(2) {
  flex-grow: 2;
}

/* other styling */
html, body {
  background-color: black;
}
.container {
  margin: auto;
  width: 520px;
  height: 650px;
  border: 5px solid #FF7F27;
  border-radius: 10px;
  padding: 5px;
}
.item1 {
  width: 100px;
  border: 5px solid #B5E61D;
  border-radius: 100%;
  margin: 5px;
  color: #B5E61D;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
}
.item2 {
  width: 100px;
  height: 400px;
  border: 5px solid #B5E61D;
  border-radius: 100%;
  margin: 5px;
  color: #B5E61D;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
}

<div class="flex-container container">  
  <div class="flex-item item1">1</div>
  <div class="flex-item item2">2</div>
</div>

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙