时间戳

首页 > 解决方案 > Flexbox 100% 高度，里面有可滚动的 div

html - Flexbox 100% 高度，里面有可滚动的 div

问题描述

我想要一个弹性框来调整整个浏览器窗口/设备的大小。在里面我想要带有可滚动div的内容。

我不知道为什么内容区域会飞过页脚 div，以及为什么两个 Content-Div 不能以正确的方式滚动。

我为所有 div 着色以获得更好的视图。我也尝试了 100vh 的高度，但没有成功。我只想要包装器 div 的固定（100%）高度和宽度。

html, body{
    height: 100%;
    margin:0;
    font-size: 20px;
}
.wrapper{
    height: 100%;
    background-color:aqua;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  height:50px;
}
.header01 {
  flex:0 0 49px; /*grow shrink basis*/
  background-color: white;
}
.header02 {
  flex:0 1 214px;
  background-color: red;
}
.header03 {
  flex:1;
  background-color: green;
}
.header04 {
  flex:0 1 245px;
  background-color: blue;
}
.header05 {
  flex:0 1 147px;
  background-color: yellow;
}

.navcon {
  display: flex;
  justify-content: row;
  height:100%;
}
.nav {
  flex:0 0 250px; /*grow shrink basis*/
  background-color: green;
}
.con {
    flex:1; /*grow shrink basis*/
  background-color:brown;
}
.maincon {
  display: flex;
  flex-direction: column;
}
.header {
  flex: 0 0 100%;
  height: 45px;
  background-color:white;
}
.con {
  background-color:blueviolet;
  flex:1;
}
.innercon{
    display:flex;
    flex-direction: row;
}
.nav_ext{
    flex:0 0 50px;
    background-color:bisque;
}
.content1{
    flex:0 0 247px;
    background-color:burlywood;
    overflow-x: hidden; 
    overflow-y: scroll; 
}
.content2{
    flex:0 1 247px;
    background-color:chocolate;
    overflow-x: hidden; 
    overflow-y: scroll; 
}
.content3{
    flex:1;
    background-color:crimson;
    overflow-x: hidden; 
    overflow-y: scroll; 
}
.content4{
    flex:0 0 50px;
    background-color:darkgoldenrod;
}
.footer {
    display:flex;
    flex-direction: row;
    background-color:darkred;
}
<div class="wrapper">
    <div class="flex-container">
        <div class="header01">H1</div>
        <div class="header02">H2</div>
        <div class="header03">H3</div> 
        <div class="header04">H4</div> 
        <div class="header05">H5</div> 
    </div>
    <div class="navcon">
        <div class="nav">Nav</div>
        <div class="con">
            <div class="maincon">
                <div class="header">Header</div>
                <div class="con">
                    <div class="innercon">
                        <div class="nav_ext">NavExt</div>
                        <div class="content1">C1</div>
                        <div class="content2">C2<br/><br/>test<br/>1231123123132<br/>test<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>test2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>test3</div>
                        <div class="content3">C3</div>
                        <div class="content4">C4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
    Footer
    </div>
</div>

编辑：在这里你可以看到一个小的视觉演示我的意思是： https ://imgur.com/a/D1vijSS 浏览器窗口充满了它，并且可以在div 内滚动，我已经“绘制”了一些滚动条形象化。

标签： htmlcssflexbox

解决方案

删除 100% 的高度。然后给包装器 css 属性：position: absolute;并将其与top: 0; bottom: 0; left: 0; right: 0;div 将整个屏幕高度和宽度相结合。要在溢出时使内容可滚动，请添加：overflow-y: auto;

html, body{
    margin:0;
    font-size: 20px;
}
.wrapper{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:aqua;
    overflow-y: auto;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  height:50px;
}
.header01 {
  flex:0 0 49px; /*grow shrink basis*/
  background-color: white;
}
.header02 {
  flex:0 1 214px;
  background-color: red;
}
.header03 {
  flex:1;
  background-color: green;
}
.header04 {
  flex:0 1 245px;
  background-color: blue;
}
.header05 {
  flex:0 1 147px;
  background-color: yellow;
}
<div class="wrapper">
    <div class="flex-container">
        <div class="header01">H1</div>
        <div class="header02">H2</div>
        <div class="header03">H3</div> 
        <div class="header04">H4</div> 
        <div class="header05">H5</div> 
    </div>
    <div class="navcon">
        <div class="nav">Nav</div>
        <div class="con">
            <div class="maincon">
                <div class="header">Header</div>
                <div class="con">
                    <div class="innercon">
                        <div class="nav_ext">NavExt</div>
                        <div class="content1">C1</div>
                        <div class="content2">C2<br/><br/>test<br/>1231123123132<br/>test<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>test2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>test3</div>
                        <div class="content3">C3</div>
                        <div class="content4">C4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
    Footer
    </div>
</div>

推荐阅读