Question

.calHeadDay,
.calBodyDay {
  width: calc((100% - 60px)/7);
  display: table-cell;
  box-sizing: border-box;
  border: 1px solid #4567b1;
  color: #4567b1;
}

.calHeadTime,
.calBodyTime {
  width: 60px;
  display: table-cell;
  box-sizing: border-box;
}

.calHeadDay {
  background-color: #eaf2f5;
  text-align: center;
  vertical-align: bottom;
  padding: 3px;
}

.calHeader,
.calBody {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.calBody {
  max-height: 500px;
  overflow-y: scroll;
}

.calTimeBlock {
  border: 1px solid #d5d8dd;
  border-right: none;
  box-sizing: border-box;
  text-align: right;
  color: #556;
  padding: 2px;
  width: 100%;
  height: 50px;
}

.calTimeBlock+.calTimeBlock {
  border-top: none;
}


}

<div>
  <div class="calHeader">
    <div class="calHeadTime"></div>
    <div class="calHeadDay">
      <!-- react-text: 15 -->Sunday
      <!-- /react-text --><br>
      <!-- react-text: 17 -->Aug 13, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 19 -->Monday
      <!-- /react-text --><br>
      <!-- react-text: 21 -->Aug 14, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 23 -->Tuesday
      <!-- /react-text --><br>
      <!-- react-text: 25 -->Aug 15, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 27 -->Wednesday
      <!-- /react-text --><br>
      <!-- react-text: 29 -->Aug 16, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 31 -->Thursday
      <!-- /react-text --><br>
      <!-- react-text: 33 -->Aug 17, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 35 -->Friday
      <!-- /react-text --><br>
      <!-- react-text: 37 -->Aug 18, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 39 -->Saturday
      <!-- /react-text --><br>
      <!-- react-text: 41 -->Aug 19, 2017
      <!-- /react-text -->
    </div>
  </div>
  <div class="calBody">
    <div class="calBodyTime">
      <div class="calTimeBlock">7am</div>
      <div class="calTimeBlock">8am</div>
      <div class="calTimeBlock">9am</div>
      <div class="calTimeBlock">10am</div>
      <div class="calTimeBlock">11am</div>
      <div class="calTimeBlock">12pm</div>
      <div class="calTimeBlock">1pm</div>
      <div class="calTimeBlock">2pm</div>
      <div class="calTimeBlock">3pm</div>
      <div class="calTimeBlock">4pm</div>
      <div class="calTimeBlock">5pm</div>
      <div class="calTimeBlock">6pm</div>
    </div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
  </div>
</div>

我已将max-height的{{1}}设置为500px，但内容占用了600px。为什么没有出现滚动条？

Answer 1

你应该只修改一些类：

.calHeader,
.calBody {
  /*display: table;*/
  display: flex;
  width: 100%;
  border-collapse: collapse;
}

但是页面右侧的滚动条导致列的标题和正文的宽度不同。

Answer 2

我不相信你可以在display: table的元素上获得滚动条。您可以将.calBody包装在另一个div中，并将最大高度和溢出设置应用于该div。

<div class="bodyWrapper">

<div class="calBody">
<div class="calBodyTime">
  <div class="calTimeBlock">7am</div>
  <div class="calTimeBlock">8am</div>
  <div class="calTimeBlock">9am</div>
  <div class="calTimeBlock">10am</div>
  <div class="calTimeBlock">11am</div>
  <div class="calTimeBlock">12pm</div>
  <div class="calTimeBlock">1pm</div>
  <div class="calTimeBlock">2pm</div>
  <div class="calTimeBlock">3pm</div>
  <div class="calTimeBlock">4pm</div>
  <div class="calTimeBlock">5pm</div>
  <div class="calTimeBlock">6pm</div>
</div>
<div class="calBodyDay"></div>
<div class="calBodyDay"></div>
<div class="calBodyDay"></div>
<div class="calBodyDay"></div>
<div class="calBodyDay"></div>
<div class="calBodyDay"></div>
<div class="calBodyDay"></div>
</div>

</div>

然后设置css：

.bodyWrapper{
  display:block;
  max-height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

Answer 3

我不是肯定的，但尝试使用overflow: auto;将溢出设置为自动，将其设置为在溢出时滚动，而不是在不溢出时滚动。

即使内容溢出，垂直滚动条也不会出现在div上？

3 个答案: