Question

我在使元素sections占用大小并使用flexbox column进行排序时遇到了麻烦，我的目标是让一个元素占用剩下的空间，所有兄弟元素都采用相同的高度但发生的事情是这些sections由于某种原因没有达到那个高度，所以它们的高度有点空，小提琴代码是here

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 < / p>

注意：我不希望标题位于固定的位置，#main的兄弟元素是我想要在溢出时滚动的唯一元素

Answer 1

经过数小时的测试，我终于找到了一种方法，通过添加#main使height: calc(100vh - 60px)成为唯一可滚动的元素，60px是标题所需的高度，因此所有部分都采用了#main身高

CSS：元素在flexbox布局上没有固定的高度

1 个答案: