如何使div占其余空间的100%？

Question

我已经创建了一个侧栏，我不希望侧栏占用画布的height:100vh，因为您可以看到图像后面有信息数据，所以如果数据远不止这些数据，它就会溢出，使侧边栏超过我不想要的100 it。因此，我想要的是，如果数据更多，并且它使边栏超过100 in，那么信息数据部分就可以用overflow: scroll滚动(现在是这样)，以防它不溢出并在大屏幕上运行，那么overflow: scroll就不用工作了，空滚动条必须消失。

​

body{
  padding:0;
  margin:0;
  font-family: arial;
}
img{
  width: 100px;
  height:100px;
  object-fit:cover;
  border-radius:500px
   
}
.container{
  display: flex;
  flex-direction: column;
  width: 200px;
  background: #e1e1e1;
  height:100vh;
  padding:20px 10px;
}

.info{
  height:500px;
  overflow:scroll
}

<div class="container">
  <div class="some-stuff">
    <img src="https://images.pexels.com/photos/13538314/pexels-photo-13538314.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="">
    <hr>

  </div>

<!--   info Data -->
      <h2>info Data section</h2>
  <div class="info">
    <div class="stud-dta-container">
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Email Address:</span>
        <p class="mt-1 fs-6-6 mb-2">youremail@email.com </p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">00 0000 0000 000</p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
        <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

    </div>
  </div>
</div>

​

Answer 1

使用flex，您可以使用flex-grow(flex-收缩& flex-basis)，浏览器将为您进行计算。那么只有父级才能被调整大小。在这里，您将高度设置为100 to，但也添加了一个填充。若要包含填充，需要重置框大小属性。

最后，在flex父服务器上重新设置大小框，保持在视图端口中，然后，信息将被告知增长(尽可能多的雪崩空间)和溢出，如果这还不够的话。

可能的CSS修复：

​

body{
  padding:0;
  margin:0;
  font-family: arial;
}
img{
  width: 100px;
  height:100px;
  object-fit:cover;
  border-radius:500px
   
}
.container{
  display: flex;
  flex-direction: column;
  width: 200px;
  background: #e1e1e1;
  height:100vh;
  padding:20px 10px;
  box-sizing:border-box;
}

.info{
  flex-grow:1;
  overflow:auto;
}

<div class="container">
  <div class="some-stuff">
    <img src="https://images.pexels.com/photos/13538314/pexels-photo-13538314.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="">
    <hr>

  </div>

<!--   info Data -->
      <h2>info Data section</h2>
  <div class="info">
    <div class="stud-dta-container">
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Email Address:</span>
        <p class="mt-1 fs-6-6 mb-2">youremail@email.com </p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">00 0000 0000 000</p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
        <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

    </div>
  </div>
</div>

​

Answer 2

我建议您稍微重新排列html内容(以便在info部分中包含您的标记)如下：

<div class="info">
  <h2>info Data section</h2>
  <div class="stud-dta-container">
    ...
  </div>
  ...
</div>

然后只需使用已知高度的“suff”div并设置其他div的高度：

.container{
  display: fixed;
  width: 200px;
  padding: 20px 10px; /*** verical-padding = 20px ***/
  height: calc(100vh - 40px); /*** 40px = 2*verical-padding ***/
  top: 0;
}
.some-stuff { height:160px; }
.info {
  height:calc(100% - 160px);
  overflow:scroll;
}

工作示例：https://jsfiddle.net/3Lyz1wut/

Answer 3

试试这个：

​

body{
  padding:0;
  margin:0;
  font-family: arial;
}
img{
  width: 100px;
  height:100px;
  object-fit:cover;
  border-radius:500px
   
}
.container{
  display: flex;
  flex-direction: column;
  width: 200px;
  background: #e1e1e1;
  height:100vh;
  padding:0px 10px;
}

.info{
  height:500px;
  overflow:scroll;
}

.some-stuff{
  padding-top: 20px;
}

<div class="container">
  <div class="some-stuff">
    <img src="https://images.pexels.com/photos/13538314/pexels-photo-13538314.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="">
    <hr>

  </div>

<!--   info Data -->
      <h2>info Data section</h2>
  <div class="info">
    <div class="stud-dta-container">
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Email Address:</span>
        <p class="mt-1 fs-6-6 mb-2">youremail@email.com </p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">00 0000 0000 000</p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
        <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

    </div>
  </div>
</div>

​