文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使flexbox调整大小依赖于内容大小

问如何使flexbox调整大小依赖于内容大小
EN

Stack Overflow用户
提问于 2021-01-11 20:09:42
回答 2查看 31关注 0票数 0

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

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

如何使容器div的高度不大于图像高度？如果不让粘性函数中断，我就不能让它工作。

您可以在这里的jsfidle中看到我的意思(我想删除滚动中下一个标题之间的空白)：https://jsfiddle.net/4w1kjz76/

​

代码语言：javascript
复制
: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;
}
代码语言：javascript
复制
<!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>

​

responsive
viewport
css
flexbox
containers
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-10 06:09:32

问题是内容有一个“隐藏”的边距。写入页边距：-1vh；修复问题:)

票数 0
EN

Stack Overflow用户

发布于 2021-01-11 20:20:25

此空间来自h1，轻松添加margin-top: 0;

​

代码语言：javascript
复制
 :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;
}
代码语言：javascript
复制
<!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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/65666608

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档