固定内容和滚动侧边栏,将网格转换为 flexbox

问题描述

我正在尝试使用固定的导航栏、固定大小的内容区域和可滚动的侧边栏来制作布局。这是一个非常标准的设置(虽然通常边栏在内容滚动时是固定的,但这只是语义),但重要的是内容的框不会溢出整个容器,因为我正在用一个图像填充它应用了 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>

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...