iT邦幫忙

0

css - 高度浮動滿版

假定分成a,b,c三個區塊,body為最外層,隨視窗變化height:100%ac為頭尾,固定某一高度,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);}
Jax iT邦新手 5 級 ‧ 2019-01-24 02:37:57 檢舉
我路過插個話,calc()有個缺點,如果有需要搭配transition效果的話,在EDGE瀏覽器裡會無法正常運作。
Zaku iT邦新手 4 級 ‧ 2019-01-24 09:54:54 檢舉
感謝兩位大大

2 個回答

5
watercool
iT邦新手 5 級 ‧ 2019-01-23 15:40:46
最佳解答

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

看更多先前的回應...收起先前的回應...
Zaku iT邦新手 4 級 ‧ 2019-01-24 09:54:00 檢舉

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

Zaku iT邦新手 4 級 ‧ 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邦新手 4 級 ‧ 2019-01-24 13:30:58 檢舉

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

0
.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>  

我要發表回答

立即登入回答