想知道是否有人可以帮助我。我使用以下代码在 div 中显示内容但是每当我将数据加载到 DIV 中时它加载正常并且出现滚动条。但是,最后的结果总是显示一半。
如果我像下面这样添加一个间隔符,它就解决了这个问题,我可以滚动到最后一个结果之外。
<div style="height:300px;"></div
但是,这不是很好,所以我的问题是 display: flex 是否允许您以某种方式添加 200px 的底部缓冲区?我很好地阅读了https://css-tricks.com/snippets/css/a-guide-to-flexbox/但找不到解决方案。
完整代码
.headerbar {
background: #333333;
position: fixed;
width: 100%;
}
#titlebar {
width: 90%;
height: 90px;
background-image: url(images/logo_new.png);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
background-position: 5px 5px;
}
#mainpage {
display: flex;
justify-content: flex-start;
min-width: 100%;
height: 600px;
width: 100%;
position: fixed;
top: 92px;
}
.leftsidemain {
background-color: #27383f;
width: 50%;
height: 850px;
flex: 1 0 0;
}
.pagearea {
background-color: blue;
width: 50%;
min-width: 50%;
min-height: 850px;
color: #000;
text-align: left;
flex: 1 0 0;
overflow: scroll;
}
<div class="headerbar">
<div id="titlebar"></div>
</div>
<div id="mainpage">
<div class="leftsidemain"></div>
<div class="pagearea"></div>
</div>
最佳答案
您的 header 元素 (.headerbar
) 的子元素 (#titlebar
) 设置为 height: 90px
。这设置了标题的高度。
您的主要内容元素 (#mainpage
) 设置为 height: 600px
。好吧,当视口(viewport)小于 690px 时,它会溢出屏幕。
尝试使用 height: calc(100vh - 90px)
而不是 height: 600px
。
此外,在父项上设置overflow
,以便在子项溢出时激活滚动条。
.headerbar {
background: #333333;
position: fixed;
width: 100%;
}
#titlebar {
width: 90%;
height: 90px;
background-image: url(images/logo_new.png);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
background-position: 5px 5px;
}
#mainpage {
display: flex;
justify-content: flex-start;
min-width: 100%;
/* height: 600px; */
width: 100%;
position: fixed;
top: 92px;
height: calc(100vh - 90px); /* new */
overflow: auto; /* new */
}
.leftsidemain {
background-color: #27383f;
width: 50%;
height: 850px;
flex: 1 0 0;
}
.pagearea {
background-color: blue;
width: 50%;
min-width: 50%;
min-height: 850px;
color: #000;
text-align: left;
flex: 1 0 0;
/* overflow: scroll; */
}
body { margin: 0; }
<div class="headerbar">
<div id="titlebar"></div>
</div>
<div id="mainpage">
<div class="leftsidemain"></div>
<div class="pagearea"></div>
</div>
关于html - Flex CSS 阻塞底部内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53696426/