我正在遇到,我认为,这是一个很小的问题。我正在尝试获得一个简单的布局(如链接的jsfiddle中所示)。但是,当右侧的div(红色)溢出其高度时,该元素在视口中溢出,并且只有在溢出视口高度时才可滚动。
我很确定这是因为我在很多元素中使用height: 100%;
,但我需要它们尽可能大(完全填充视口高度)。
我想要的是视口将被这三个部分完全填充:导航,左侧边栏和右侧内容(请参见下图)。右边内容部分在溢出视口时应该可滚动的位置。
因此,得出结论..这里的问题是可滚动内容首先溢出视口,当div(看起来像)与视口相同的高度时,它开始可滚动。我显然希望div在溢出视口时可以滚动。
我怎么做到这一点?谢谢你的时间。
HTML
<div id="content-container">
<div id="content">
<div id="left">
IM LEFT
</div>
<div id="right">
<div id="inner">
IM RIGHT
</div>
IM RIGHT
</div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#main {
height: 100%;
background: black;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100vw;
height: 100vh;
}
#main nav {
background: orange;
width: 100%;
height: 96px;
}
#main #content-container {
background: darkgreen;
color: white;
width: 100%;
flex-grow: 1;
max-height: 100%;
}
#main #content-container #content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
max-height: 100%;
}
#main #content-container #content #left {
background: darkblue;
width: 30%;
height: 100%;
}
#main #content-container #content #right {
background: darkred;
height: 100%;
flex-grow: 1;
overflow-y: scroll;
}
#main #content-container #content #right #inner {
font-size: 25rem;
}
您可以简化代码,如下所示:
body {
margin: 0;
}
#main {
height: 100vh; /*full height*/
background: black;
display: flex;
flex-direction: column;
}
#main nav {
background: orange;
height: 96px; /*fixed height*/
}
#content-container {
background: darkgreen;
color: white;
flex-grow: 1; /*fill the remaining height*/
min-height:0; /*enable the shrink*/
}
#content {
display: flex;
flex-direction: row;
height: 100%;
}
#left {
background: darkblue;
width: 30%;
}
#right {
background: darkred;
overflow:auto;
}
/*Irrelevant*/
#inner {
font-size: 25rem;
}
<div id="main">
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/games">Games</a>
</li>
<li>
<a href="/create">Create</a>
</li>
</ul>
</nav>
<div id="content-container">
<div id="content">
<div id="left">
IM LEFT
</div>
<div id="right">
<div id="inner">
IM RIGHT
</div>
IM RIGHT
</div>
</div>
</div>
</div>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#main {
height: 100%;
background: black;
display: flex;
flex-wrap: wrap;
}
#main nav {
background: orange;
width: 100%;
height: 96px;
}
#main #content-container {
background: darkgreen;
color: white;
width: 100%;
height: calc(100% - 96px);
max-height: calc(100% - 96px);
}
#main #content-container #content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
max-height: 100%;
}
#main #content-container #content #left {
background: darkblue;
width: 30%;
height: 100%;
}
#main #content-container #content #right {
background: darkred;
height: 100%;
width: 70%;
overflow-y: auto;
overflow-x: hidden;
word-break: break-all;
}
#main #content-container #content #right {
font-size: 27em;
}
<div id="main">
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/games">Games</a>
</li>
<li>
<a href="/create">Create</a>
</li>
</ul>
</nav>
<div id="content-container">
<div id="content">
<div id="left">
IM LEFT
</div>
<div id="right">
IM RIGHT
</div>
</div>
</div>
</div>
一种解决方案可能是在使用#content
定义calc(100% - 96px)
的高度时考虑导航元素的高度,96px
是导航元素的高度:
#main #content-container #content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: calc(100% - 96px);
max-height: calc(100% - 96px);
}
#main #content-container #content #right {
overflow-y: auto;
}