问题描述
我正在尝试使用固定的导航栏、固定大小的内容区域和可滚动的侧边栏来制作布局。这是一个非常标准的设置(虽然通常边栏在内容滚动时是固定的,但这只是语义),但重要的是内容的框不会溢出整个容器,因为我正在用一个图像填充它应用了 object-fit
以便它可以在视口内愉快地缩放,同时保持其纵横比。
我实际上有一个使用网格的功能版本(嵌入并在下面链接)。问题在于,如果我希望侧边栏消失,我必须更改父 div 上的样式,这在我使用的组件系统中很混乱(但可行)。理想情况下,我只需将侧边栏设置为 display: none
,内容就会填满整个空间。
我已经尝试将整个内容转换为 flexBox,并将第二行变成嵌套网格,但我似乎无法在保留整体高度锁定的同时执行其中任何一项操作。
这是工作网格(和 a CodePen)。
html,body {
margin: 0;
}
.wrapper {
height: 100vh;
display: grid;
grid-template-columns: 1fr 150px;
grid-template-rows: auto 1fr;
}
nav {
height: 50px;
grid-row: 1;
grid-column: 1 / span 2;
background-color: darkseagreen;
}
.content {
background-color: salmon;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: contain;
}
.sidebar {
overflow-y: scroll;
background-color: cornflowerblue;
}
<div class="wrapper">
<nav>Navbar should stay fixed</nav>
<div class="content">
<img src="http://placehold.it/640x360">
</div>
<div class="sidebar">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro repudiandae,laboriosam dolorum mollitia fugit autem officiis explicabo minima! Maxime ea a unde alias laboriosam vel pariatur delectus. A,quas ratione?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus sunt,nesciunt et assumenda asperiores fuga aperiam nulla voluptas reprehenderit iusto molestias blanditiis corrupti,nobis ab id dolorum obcaecati ullam!</div>
</div>
</div>
有没有办法制作这个,让第二行变成一个 flexBox,同时保持其高度不扩展,这样我就可以折叠侧边栏而不必重新布局整个网格? (如果有更聪明的方法来获得我正在尝试的 img
缩放,我也愿意接受。)
解决方法
只需将模板更新为grid-template-columns: 1fr auto;
并使侧边栏的宽度等于150px
;
html,body {
margin: 0;
}
.wrapper {
height: 100vh;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr;
}
nav {
height: 50px;
grid-row: 1;
grid-column: 1 / span 2;
background-color: darkseagreen;
}
.content {
background-color: salmon;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: contain;
}
.sidebar {
overflow-y: scroll;
background-color: cornflowerblue;
width:150px;
}
<div class="wrapper">
<nav>Navbar should stay fixed</nav>
<div class="content">
<img src="http://placehold.it/640x360">
</div>
<div class="sidebar" style="display:none;">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro repudiandae,laboriosam dolorum mollitia fugit autem officiis explicabo minima! Maxime ea a unde alias laboriosam vel pariatur delectus. A,quas ratione?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus sunt,nesciunt et assumenda asperiores fuga aperiam nulla voluptas reprehenderit iusto molestias blanditiis corrupti,nobis ab id dolorum obcaecati ullam!</div>
</div>
</div>