我正尝试将我的页面内容设置在透明标头下方,如我的网站所示。但是,将包装的高度设置为100%时,不会出现围绕包装内容的溢出y的情况。内容的高度足够大,可以在设置为自动时显示。如何使包装器的高度等于页面的高度,而不包括页眉的高度,以便滚动?
我的网站:https://fortnitematcher.com
包装器
<div class="wrapper">
<div class="content">
<div class="mainContainer" style="">
<div class="containerTitle">Matchmaking for Fortnite with FortniteMatcher</div>
gtgwgrtgr<br>gtgwgrtgr
</div><br>
<div class="mainContainer" style="float: left; width: 780px;">
<div class="containerTitle">Matchmaking for Fortnite with FortniteMatcher</div>
gtgwgrtgr<br>gtgwgrtgr
<div class="containerTitle">Matchmaking for Fortnite with FortniteMatcher</div>
gtgwgrtgr<br>gtgwgrtgr
<div class="containerTitle">Matchmaking for Fortnite with FortniteMatcher</div>
gtgwgrtgr<br>gtgwgrtgr
<div class="containerTitle">Matchmaking for Fortnite with FortniteMatcher</div>
gtgwgrtgr<br>gtgwgrtgr
<div class="containerTitle">Matchmaking for Fortnite with FortniteMatcher</div>
gtgwgrtgr<br>gtgwgrtgr
<div class="containerTitle">Matchmaking for Fortnite with FortniteMatcher</div>
gtgwgrtgr<br>gtgwgrtgr
</div>
<div class="mainContainer" style="float: right; width: 280px;">
<div class="sideContainerTitle">Matchmaking for Fortnite with FortniteMatcher</div>
gtgwgrtgr<br>gtgwgrtgr
</div>
</div>
</div>
样式:
.wrapper {
margin-top: 75px;
width: 100%;
overflow-y: auto;
/*height: 90%;*/
}
.content {
padding-top: 25px;
margin-left: auto;
margin-right: auto;
min-height: 1000px;
background: rgba(0, 0, 0, 0.5);
width: 1130px;
}
.mainContainer {
padding: 15px;
background: rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 82px 5px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 0 0 8px 5px rgba(0,0,0,0.4) inset;
box-shadow: 0 0 8px 5px rgba(0,0,0,0.4) inset;
box-shadow: 0px 2px 5px #000;
color: grey;
width: 1100px;
min-height: 100px;
margin-bottom: 10px;
display: inline-block;
}