时间戳

首页 > 解决方案 > Flex 父级不会扩展到子级的高度

css - Flex 父级不会扩展到子级的高度

问题描述

这可能是一个业余问题，因为我刚刚开始使用 Flexbox，但是我在创建以下布局时遇到了麻烦。

https://jsfiddle.net/wp6hsnjo/

我的目标是有两行（Main 在顶部，Footer 在底部），然后在 Main 内有 3 列，第一列和最后一列固定，中间列填充剩余空间。我遇到的困难是主容器不会继承子元素的高度..这会使粘性页脚陷入困境。有没有办法让主 div 扩展以匹配子元素的高度？我尝试过使用溢出和高度设置，但没有成功。

html, body {
    height: 100%;
}

body {
    margin:0;
    padding:0;
    background-color: #f4f3f0;
    box-sizing: border-box;
    font-family: arimo, sans-serif;
    color: #555760;
}


#container {
    max-width:1560px;
    margin: 0 auto;
    display: flex;
    flex-flow: wrap;
    min-height: 100vh;
    flex-direction: column;
}

#main {
    display: flex;
    flex: 1 0 auto;
    height:auto;
}

header {
    padding:30px;
    flex: 0 0 100px;
    order: 1;
}

#logo-container {

}

.logo {
    width:75px;
    margin-top:5px;
    position:fixed;
}

nav {
    width:100px;
    text-align: right;
    flex: 0 0 100px;
    order: 3;
    padding:30px;
}

nav ul {
    list-style-type: none;
    width:100px;
    margin: 0;
    padding: 0;}

.main-nav {
    position:fixed;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #222; 
    letter-spacing: 0.3px;
}

.main-nav li {
    margin-bottom:7px;
}

.social-media {
    position: fixed;
    bottom:0;
    margin-bottom:40px;
    text-align: right;
    width: 100px;
}

.social-media-icons {
    width:16px; 
    height:16px; 
    margin-bottom:18px;
}

#page-content {
    margin:30px 0 60px 0;
    flex: 1;
    order: 2; 
}

.portfolio {
    display: flex;
    flex-wrap: wrap;
    padding-bottom:300px;
  }

.square {
    position: relative;
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

.span2 {
    position: relative;
    flex-basis: calc(66.666% - 10px);
    margin: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

.square::before {
    content: '';
    display: block;
    padding-top: 100%;
  }

.square .content {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
  }

footer {
    order: 2;
    margin: 0 0 58px 30px;
    flex-shrink: 0;
    font-size: 12px;
}

.hidden {
    opacity: 0;
  }

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}
.fade-in-element {
  animation: fade-in 1.4s;
}
<div id="container"> <!-- CONTAINER -->

    <div id="main">
            <header> <!-- HEADER -->
                <div id="logo-container">
                    <img src="images/icons/logo-black.png" alt="Logo" class="logo">
                </div>
            </header> <!-- HEADER END -->


            <nav>
                <ul class="main-nav">
                    <li>Home</li>
                    <li>Archive</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>

                <ul class="social-media"> 
                </ul>
            </nav>



            <section id="page-content"> <!-- PAGE CONTENT -->

                <div class="portfolio">

                    <div class="span2">
                        <div class="content">
                        </div>
                      </div>

                      <div class="square">
                        <div class="content spread">
                        </div>
                      </div>

                      <div class="square">
                        <div class="content column">
                        </div>
                      </div>

                      <div class="square">
                        <div class="content spread">
                        </div>
                      </div>

                      <div class="square">
                        <div class="content column">
                        </div>
                      </div>
                      <div class="square">
                        <div class="content spread">
                        </div>
                      </div>
                      <div class="span2">
                        <div class="content">
                        </div>
                      </div>



                      <div class="square">
                        <div class="content column">
                        </div>
                      </div>

                      <div class="square">
                        <div class="content spread">
                        </div>
                      </div>

                      <div class="square">
                        <div class="content column">
                        </div>
                      </div>

                </div>

            </section> <!-- PAGE CONTENT END -->


    </div><!-- MAIN END -->


    <footer class="hidden" > <!-- FOOTER -->

        <div id="copyright">&copy; 2020 this is the footer</div>

    </footer> <!-- FOOTER END -->


    </div> <!-- CONTAINER END -->

标签： cssflexbox

解决方案

flex-flow: wrap从你的元素中删除#container就可以了，并从元素中删除 300px 底部填充.portfolio以防止一堆额外的空间。

var animateHTML = function() {
    var elems;
    var windowHeight;
    
    function init() {
    
    elems = document.querySelectorAll('.hidden');
    windowHeight = window.innerHeight;
    addEventHandlers();
    checkPosition();
    }
    
    function addEventHandlers() {
    window.addEventListener('scroll', checkPosition);
    window.addEventListener('resize', init);
    }
    
    function checkPosition() {
    for (var i = 0; i < elems.length; i++) {
    var positionFromTop = elems[i].getBoundingClientRect().top;
    if (positionFromTop - windowHeight <= 0) {
    elems[i].className = elems[i].className.replace(
    'hidden',
    'fade-in-element'
    );
    }
    
    if ((positionFromTop - windowHeight > 1) || (positionFromTop < 0)) {
    elems[i].className = elems[i].className.replace(
    'fade-in-element',
    'hidden'
    );
    }
    }
    }
    
    return {
    init: init
    };
    };
html, body {
    height: 100%;
}

body {
    margin:0;
    padding:0;
    background-color: #f4f3f0;
    box-sizing: border-box;
    font-family: arimo, sans-serif;
    color: #555760;
}


#container {
    max-width:1560px;
    margin: 0 auto;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

#main {
    display: flex;
    flex: 1 0 auto;
}

header {
    padding:30px;
    flex: 0 0 100px;
    order: 1;
}

#logo-container {

}

.logo {
    width:75px;
    margin-top:5px;
    position:fixed;
}

nav {
    width:100px;
    text-align: right;
    flex: 0 0 100px;
    order: 3;
    padding:30px;
}

nav ul {
    list-style-type: none;
    width:100px;
    margin: 0;
    padding: 0;}

.main-nav {
    position:fixed;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #222; 
    letter-spacing: 0.3px;
}

.main-nav li {
    margin-bottom:7px;
}

.social-media {
    position: fixed;
    bottom:0;
    margin-bottom:40px;
    text-align: right;
    width: 100px;
}

.social-media-icons {
    width:16px; 
    height:16px; 
    margin-bottom:18px;
}

#page-content {
    margin:30px 0 60px 0;
    flex: 1;
    order: 2; 
}

.portfolio {
    display: flex;
    flex-wrap: wrap;
  }
  
.square {
    position: relative;
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

.span2 {
    position: relative;
    flex-basis: calc(66.666% - 10px);
    margin: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

.square::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
  
.square .content {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
  }

footer {
    order: 2;
    margin: 0 0 58px 30px;
    flex-shrink: 0;
    font-size: 12px;
}

.hidden {
    opacity: 0;
  }

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}
.fade-in-element {
  animation: fade-in 1.4s;
}
<body onload="animateHTML().init();">
        <div id="container"> <!-- CONTAINER -->

        <div id="main">
                <header> <!-- HEADER -->
                    <div id="logo-container">
                        <img src="images/icons/logo-black.png" alt="Logo" class="logo">
                    </div>
                </header> <!-- HEADER END -->
                
                
                <nav>
                    <ul class="main-nav">
                        <li>Home</li>
                        <li>Archive</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>

                    <ul class="social-media"> 
                    </ul>
                </nav>


                
                <section id="page-content"> <!-- PAGE CONTENT -->

                    <div class="portfolio">

                        <div class="span2">
                            <div class="content">
                            </div>
                          </div>
                        
                          <div class="square">
                            <div class="content spread">
                            </div>
                          </div>
                        
                          <div class="square">
                            <div class="content column">
                            </div>
                          </div>
                        
                          <div class="square">
                            <div class="content spread">
                            </div>
                          </div>
                        
                          <div class="square">
                            <div class="content column">
                            </div>
                          </div>
                          <div class="square">
                            <div class="content spread">
                            </div>
                          </div>
                          <div class="span2">
                            <div class="content">
                            </div>
                          </div>
                        
                          
                        
                          <div class="square">
                            <div class="content column">
                            </div>
                          </div>
                        
                          <div class="square">
                            <div class="content spread">
                            </div>
                          </div>
                        
                          <div class="square">
                            <div class="content column">
                            </div>
                          </div>

                    </div>

                </section> <!-- PAGE CONTENT END -->

                
        </div><!-- MAIN END -->

        
        <footer class="hidden" > <!-- FOOTER -->

            <div id="copyright">&copy; 2020 this is the footer</div>

        </footer> <!-- FOOTER END -->
        
    
        </div> <!-- CONTAINER END -->

    </body>

推荐阅读