Question

我正在尝试创建一个边栏，它是视口的固定百分比。在侧边栏中，我想要一个固定在顶部的元素，而如果其余内容占用的垂直空间大于侧边栏高度，则滚动该内容。

在此示例中，h1元素保留在父元素的顶部，而其余内容.inner可以滚动。 .inner内的内容和滚动条被h1元素的高度切除。

如何显示所有内容和滚动条？

* { box-sizing: border-box; margin: 0; padding: 0; }

body: {
  height: 100vh; 
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-areas: 'left right';
    justify-content: space-around;
    grid-gap: 12px;
    width: 90vw;
    height: 100vh;
    margin: auto;
}

.left {
  grid-area: left;
}

.right {
  gird-area: right
}

.side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.outer {
  height: 90vh; 
  margin: auto;
  position: relative;
  border: 1px solid blue;
  overflow:hidden;
}

.inner {
  height: 100%;
  overflow: auto;
}

h1 {
  height: 100px;
  background: lightgrey;
}

p {
  height: 100px;
}

<div class="grid-container">
  <div class="left">
    <div class="side">
      <div class="outer">
        <h1>other content</h1>
        <div class="inner">
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
         </div>
       </div>
    </div>

  </div>
  <div class="right"></div>      
</div>

Answer 1

您要避免在任何可能的地方都设置明确的高度。那会咬你。为您的Flex布局设置规则，让它做自己的事情。如果您在某处需要空格，请保持简单，然后将其添加到框的内容中，而不是框本身。通过将布局和内容的关注点分开，您可以更轻松地提取一部分内容并替换它，而无需进入布局的CSS。

滚动到CSS中以获得提示。

* { box-sizing: border-box; margin: 0; padding: 0; }

body: {
  height: 100vh; 
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-areas: 'left right';
    justify-content: space-around;
    grid-gap: 12px;
    width: 90vw;
    height: 100vh;
    margin: auto;
}

.left {
  grid-area: left;
}

.right {
  gird-area: right
}

.side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.outer {
  height: 90vh; 
  margin: auto;
  position: relative;
  border: 1px solid blue;
  display: flex; /* <--------------- change */
  flex-direction: column; /* <--------------- add */
}

.inner {
  /* height: 100%; <--------------- remove */
  overflow: auto;
}

h1 {
  flex: 0 0; /* <--------------- change */
  background: lightgrey;
}

p {
  height: 100px;
}

<div class="grid-container">
  <div class="left">
    <div class="side">
      <div class="outer">
        <h1>other content</h1>
        <div class="inner">
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
         </div>
       </div>
    </div>

  </div>
  <div class="right"></div>      
</div>

当父元素的高度设置为vh

1 个答案: