我有一个奇怪的问题,为什么当我垂直调整窗口大小时,我的div容器会缩小/消失并且不遵循正常的网站布局。这是我正在谈论的屏幕截图。
如您所见,红色应该覆盖所有内容,包括内部带有所有颜色的框。这仅在我垂直调整网页大小时发生,我不知道为什么这样做。
这是我的代码:
.main-content {
display: flex;
flex-direction: column;
height: calc(100% - 84px);
}
.main-content-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
background: red;
}
.info-box-container {
display: flex;
justify-content: center;
}
.info-box {
display: flex;
height: 195px;
width: 350px;
background: white;
margin-right: 15px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.info-box .left-side {
display: flex;
flex-direction: column;
flex: 1;
background: red;
}
.info-box .top {
flex: 1;
display: flex;
justify-content: center;
background: yellow;
}
.info-box .top p {
margin-bottom: 5px;
background: green;
font-size: 25px;
align-self: flex-end;
}
.info-box .bottom {
flex: 1;
display: flex;
justify-content: center;
background: orange;
}
.info-box .right-side {
flex: 1;
background: blue;
}
.info-box:last-child {
margin: 0;
}
.welcome-msg {
text-align: center;
height: auto;
}
.welcome-msg p {
font-size: 30px;
font-weight: lighter;
}
<div class="main-content">
<div class="main-content-container">
<div class="welcome-msg">
<p>Welcome, Omar</p>
</div>
<div class="info-box-container">
<div class="info-box">
<div class="left-side">
<div class="top">
<p>500</p>
</div>
<div class="bottom">
<p>Reports</p>
</div>
</div>
<div class="right-side">
</div>
</div>
</div>
</div>
</div>
谢谢!
答案 0 :(得分:1)
您可以将min-height
添加到.main-content
。在您的情况下,.info-box
的高度为195px
。将min-height
中的.main-content
设置为195px
,以便在调整屏幕大小时不会缩小到195px
以上,即.info-box
的大小。
https://codepen.io/samuellawrentz/pen/wxKRga
.main-content {
display: flex;
flex-direction: column;
height: calc(100% - 84px);
min-height: 195px;
}
.main-content-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
background: red;
}
.info-box-container {
display: flex;
justify-content: center;
}
.info-box {
display: flex;
height: 195px;
width: 350px;
background: white;
margin-right: 15px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.info-box .left-side {
display: flex;
flex-direction: column;
flex: 1;
background: red;
}
.info-box .top {
flex: 1;
display: flex;
justify-content: center;
background: yellow;
}
.info-box .top p {
margin-bottom: 5px;
background: green;
font-size: 25px;
align-self: flex-end;
}
.info-box .bottom {
flex: 1;
display: flex;
justify-content: center;
background: orange;
}
.info-box .right-side {
flex: 1;
background: blue;
}
.info-box:last-child {
margin: 0;
}
.welcome-msg {
text-align: center;
height: auto;
}
.welcome-msg p {
font-size: 30px;
font-weight: lighter;
}
<div class="main-content">
<div class="main-content-container">
<div class="welcome-msg">
<p>Welcome, Omar</p>
</div>
<div class="info-box-container">
<div class="info-box">
<div class="left-side">
<div class="top">
<p>500</p>
</div>
<div class="bottom">
<p>Reports</p>
</div>
</div>
<div class="right-side">
</div>
</div>
</div>
</div>
</div>