CSS：元素未在flexbox佈局上佔據固定高度

我在製作元素sections時遇到問題並且使用flexbox column進行了排序，我的目標是使一個元素佔據剩餘空間，並且所有兄弟元素採取同樣的高度，但發生的事情是，這些sections沒有采取這樣的高度出於某種原因，因此他們的身高是有點空，小提琴代碼here CSS：元素未在flexbox佈局上佔據固定高度

HTML代碼是這樣的：

<body class="flexed-column"> 
    <header class="default-primary-color flexed-row"> 
     <div id="header-text" class="text-primary-color"> 
      Personal Site 
     </div> 
    </header> 

    <content class="flexed-row flex-grow"> 
     <div id="main" class="flexed-column flex-grow"> 
      <section id="section-home" class="flexed-column"> 
       <img id="user-thumbnail" src="https://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png"> 

       <h2 id="user-name" class="primary-text-color">Name <span id="user-nickname" class="secondary-text-color">(Nickname)</span></h2> 

       <h3 id="user-title">Title</h3> 
      </section> 

      <section id="section-biography"> 
       <h1 class="section-title primary-text-color" data-msg="biography">{biography}</h1> 
      </section> 

      <section id="section-projects" class="flexed-column"> 
       <h1 class="section-title primary-text-color" data-msg="projects">{projects}</h1> 

       <div class="flexed-row flex-grow section-content wrapper"> 
        <div class="card"> 
         <div class="card-media"> 
          <img src="https://placehold.it/320x180"> 
         </div> 
         <div class="card-title"> 
          <h3 class="card-title-text primary-text-color">Title here</h3> 
          <p class="card-title-sub-text secondary-text-color">Sub-title here</p> 
         </div> 
        </div> 
       </div> 
      </section> 
     </div> 
    </content> 
</body>

CSS：

html, body{ 
    height: 100%; 
    width: 100%; 
} 
body{ 
    margin: 0; 
} 

header{ 
    height: 60px; 
    justify-content: space-between; 
    z-index: 100; 
    -webkit-box-shadow: 0 1px 4px 1px #CCC; 
    box-shadow: 0 1px 4px 1px #CCC; 
} 
header > #header-text{ 
    margin: 18px; 
    font-size: 20px;  
} 

content{ 
    z-index: 90; 
} 

.hidden{ 
    display: none; 
} 

#main{ 
    scroll-behavior: smooth; 
    overflow-y: hidden; 
} 
#main > section{ 
    min-height: 100%; 
    height: 100%; 
    min-width: 100%; 
    width: 100%; 
} 
#main > section h1.section-title{ 
    margin: 15px; 
    text-transform: capitalize; 
} 
#main > section .section-content{ 
    margin: 0 15px; 
} 

section#section-home > #user-thumbnail{ 
    height: 160px; 
    width: 160px; 
    margin: auto auto 20px; 
    border-radius: 50%; 
} 
section#section-home > #user-name{ 
    margin: 20px auto; 
} 
#user-name > #user-nickname{ 
    font-size: 16px; 
    font-style: italic; 
} 
section#section-home > #user-email, 
section#section-home > #user-available{ 
    margin: 10px auto; 
} 
section#section-home > #user-title{ 
    margin: 20px auto auto; 
} 

.flexed-row{ 
    display: flex; 
    flex-direction: row; 
} 
.flexed-column{ 
    display: flex; 
    flex-direction: column; 
} 
.flexed-row.wrapper, 
.flexed-column.wrapper{ 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-content: space-around; 
    align-items: baseline; 
} 
.flexed-row > .flex-grow, 
.flexed-column > .flex-grow{ 
    flex: 1; 
} 
.centered{ 
    margin: auto; 
} 
.centered-row{ 
    margin: 0 auto; 
} 
.card{ 
    -webkit-box-shadow: 0 2px 2px 0px #CCC; 
    box-shadow: 0 2px 2px 0px #CCC; 

    transition: all .2s; 
} 
.card:hover{ 
    -webkit-box-shadow: 0 6px 8px 0px #CCC; 
    box-shadow: 0 6px 8px 0px #CCC; 
} 
.card > .card-media{ 
    height: 180px; 
    width: 320px; 
} 
.card > .card-title{ 
    padding: 16px; 
} 
.card > .card-title > .card-title-text{ 
    margin: 0; 
} 
.card > .card-title > .card-title-sub-text{ 
    margin: 8px 0 0; 
}

我仍然在學習如何正確使用CSS，我只是希望每個部分拿剩下的高度空間的100％，所以滾動時，它可能是可能只看到一個完整的部分，而不是2或3

注：我不想頭是固定位置，這是#main兄弟元素是我想後

來源

2017-03-03 nosthertus

是這樣的嗎？ https://jsfiddle.net/wk20zwrb/6/ –

@MichaelCoker不錯..是否有可能使標題不可滾動？像一切都應該滾動，但標題 – nosthertus

https://jsfiddle.net/wk20zwrb/7/ –

與測試中掙扎小時溢出滾動的唯一元素，我終於找到一種方法使#main成爲唯一的可滾動元素，加入height: calc(100vh - 60px),60px是標題所需的高度，所以所有部分都需要#main高度

來源

2017-03-03 18:48:05 nosthertus

CSS：元素未在flexbox佈局上佔據固定高度

回答

相關問題