如何使 flexbox 根据内容大小调整大小

Question

我正在构建一个 web 应用程序，其中我在可滚动的 flexbox 中有不同的粘性元素。

在 flexbox 的中间容器中，您可以滚动浏览新 div 中包含的内容，从另一个 div 的 header/bottom 开始。问题是我需要 div-container 来根据视口响应地调整内容的大小。目前，它不是，内容容器始终是 100vh，即使图像没有填满整个视口。

如何使容器 div 的高度不大于图像高度？如果不破坏粘性函数，我无法让它工作。

你可以在此处的 jsfidle 中看到我的意思（它是我要删除的滚动中下一个 header 之间的白色 space）： https://jsfiddle.net/4w1kjz76/

:root {
    /* Variables for header h1*/
     --ratio: 15;
     --reverse-ratio: 20;
     --container-width: 50w;
     --container-height: 12.5vh;
     --font1-sizeVW: 19vh;
     --font1-sizeVH: calc(var(--ratio) * 15vw);
     --font2-sizeVW: 6vh;
     --font2-sizeVH: calc(var(--ratio) * 6vw);
}
 html, body {
     margin:0;
     padding:0;
     -ms-overflow-style: none;
    /* IE and Edge */
}
 body::-webkit-scrollbar {
     display: none;
}
 @media(max-width:50em) {
     .section {
         flex-direction:column 
    }
}
 * {
     box-sizing: border-box;
}
 main {
     max-width: 100vw;
     margin: 0px auto;
     display: flex;
     flex-flow: row wrap;
}
 .contentmain {
     height: auto;
     display: block;
     padding: 0px;
     flex: 1 1 50%;
}
 .sidebarright {
     background-color: green;
     color: white;
     padding: 20px;
     height: 100vh;
     top: 0;
     width: 5%;
     position: sticky;
     align-self: flex-start;
}
 .sidebarleft {
     background-color: blue;
     height: 100vh;
     padding: 20px;
     display: inline-block;
     flex: 1 1 20%;
     top: 0;
     position: sticky;
     align-self: flex-start;
     color: white;
}
 h1 {
     top:-4.4vh;
     color: white;
     font-family: arial;
}
 .content {
     position: relative;
     border: 0px solid red;
     height: 100vh;
     top: 0;
     text-align: left;
     color: black;
}
 .content img {
     float: left;
     height: auto;
     width: 49.75%;
}
 .rightimg {
     margin-left: 0.5%;
}
 .header {
     position: sticky;
     top: 0;
     margin:0;
     padding:0;
     background-color:black;
     height:12.5vh;
}
 .bottommenu {
     background: orange;
     color: white;
     width: 100%;
     padding: 20px;
     height: 9vh;
     position:sticky;
     bottom:0;
     right:0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TRAILBLAZER</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
    <script src="/js/smoothscroll.min.js"></script>
</head>
<body>
    <main id="content">
        <div class="sidebarleft">
            LEFT-BAR
        </div>
        <div class="contentmain">
            <div class="content">
                <header class="header">
                    <div class="header-bg">
                        <h1>HEADER 1</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-1">
                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>
            </div>
            <div class="content">
                <header class="header">
                    <div class="header-bg">
                        <h1>HEADER 2</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-2">

                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>
            </div>
            <div class="content">
                <header class="header">
                    <div class="header-bg" id="erika">
                        <h1>HEADER 3</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-3">
                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>
            </div>
            <div class="content">
                <header class="header">
                    <div class="header-bg">
                        <h1>HEADER 3</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-4">
                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>

            </div>
            <div class="content">
                <header class="header">
                    <div class="header-bg">
                        <h1>HEADER 4</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-5">
                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>
            </div>
            <footer class="bottommenu">
                STICKY BOTTOM MENU
            </footer>
        </div>
        <div class="sidebarright">
            RIGHT-BAR
        </div>
    </main>
</body>
</html>

Answer 1

这个space来自h1，轻松添加margin-top: 0;

 :root {
    /* Variables for header h1*/
     --ratio: 15;
     --reverse-ratio: 20;
     --container-width: 50w;
     --container-height: 12.5vh;
     --font1-sizeVW: 19vh;
     --font1-sizeVH: calc(var(--ratio) * 15vw);
     --font2-sizeVW: 6vh;
     --font2-sizeVH: calc(var(--ratio) * 6vw);
}
 html, body {
     margin:0;
     padding:0;
     -ms-overflow-style: none;
    /* IE and Edge */
}
 body::-webkit-scrollbar {
     display: none;
}
 @media(max-width:50em) {
     .section {
         flex-direction:column 
    }
}
 * {
     box-sizing: border-box;
}
 main {
     max-width: 100vw;
     margin: 0px auto;
     display: flex;
     flex-flow: row wrap;
}
 .contentmain {
     height: auto;
     display: block;
     padding: 0px;
     flex: 1 1 50%;
}
 .sidebarright {
     background-color: green;
     color: white;
     padding: 20px;
     height: 100vh;
     top: 0;
     width: 5%;
     position: sticky;
     align-self: flex-start;
}
 .sidebarleft {
     background-color: blue;
     height: 100vh;
     padding: 20px;
     display: inline-block;
     flex: 1 1 20%;
     top: 0;
     position: sticky;
     align-self: flex-start;
     color: white;
}
 h1 {
     top:-4.4vh;
     color: white;
     font-family: arial;
     margin-top: 0;
}
 .content {
     position: relative;
     border: 0px solid red;
     height: 100vh;
     top: 0;
     text-align: left;
     color: black;
}
 .content img {
     float: left;
     height: auto;
     width: 49.75%;
}
 .rightimg {
     margin-left: 0.5%;
}
 .header {
     position: sticky;
     top: 0;
     margin:0;
     padding:0;
     background-color:black;
     height:12.5vh;
}
 .bottommenu {
     background: orange;
     color: white;
     width: 100%;
     padding: 20px;
     height: 9vh;
     position:sticky;
     bottom:0;
     right:0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TRAILBLAZER</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
    <script src="/js/smoothscroll.min.js"></script>
</head>
<body>
    <main id="content">
        <div class="sidebarleft">
            LEFT-BAR
        </div>
        <div class="contentmain">
            <div class="content">
                <header class="header">
                    <div class="header-bg">
                        <h1>HEADER 1</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-1">
                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>
            </div>
            <div class="content">
                <header class="header">
                    <div class="header-bg">
                        <h1>HEADER 2</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-2">

                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>
            </div>
            <div class="content">
                <header class="header">
                    <div class="header-bg" id="erika">
                        <h1>HEADER 3</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-3">
                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>
            </div>
            <div class="content">
                <header class="header">
                    <div class="header-bg">
                        <h1>HEADER 3</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-4">
                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>

            </div>
            <div class="content">
                <header class="header">
                    <div class="header-bg">
                        <h1>HEADER 4</h1>
                    </div>
                </header>
                <div class="content-inner" id="trigger-5">
                    <img src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                    <img class="rightimg" src="https://i.pinimg.com/564x/dc/68/0f/dc680f879b6b100b95f0bfcb0ec07432.jpg">
                </div>
            </div>
            <footer class="bottommenu">
                STICKY BOTTOM MENU
            </footer>
        </div>
        <div class="sidebarright">
            RIGHT-BAR
        </div>
    </main>
</body>
</html>

Answer 2

问题是内容有一个“隐藏”边距。书写余量：-1vh；解决了这个问题:)

如何使 flexbox 根据内容大小调整大小

How to make flexbox resize dependant on content size

css

containers

viewport

flexbox

responsive