Question

我想要一个用于特定div容器的滚动条。所以我现在有这个

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});

#page {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100%;
}

@media (max-width: 800px) {
  #panel {
    grid-template-columns: 100%;
    grid-template-rows: 50% 50%;
  }
}

#logsContainer {
  overflow-y: scroll;
  height: 100px;
  /* 
    calc(100% - 18px);
    18px because the "Logs" title has a height of 18
  */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
  <div>
    Commands
  </div>

  <div>
    <div>
      Logs
    </div>
    <div id="logsContainer">
    </div>
  </div>
</div>

如您所见，日志在100px的硬编码高度上具有自己的滚动条。我想将此容器拉伸到底部（100％）。当然，我必须从中减去标题高度。所以如果我通过calc(100% - 18px);，我会得到这个结果

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});

#page {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100%;
}

@media (max-width: 800px) {
  #panel {
    grid-template-columns: 100%;
    grid-template-rows: 50% 50%;
  }
}

#logsContainer {
  overflow-y: scroll;
  height: calc(100% - 18px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
  <div>
    Commands
  </div>

  <div>
    <div>
      Logs
    </div>
    <div id="logsContainer">
    </div>
  </div>
</div>

，但是您可以看到div容器的高度大于页面高度的100％。如何正确拉伸该日志容器？

Answer 1

您需要将SELECT CASE WHEN DATE_ADD([Borrowed Date], INTERVAL 3 DAY) > NOW() THEN 'Not Overdue' ELSE 'Overdue' END Status FROM dbo.BookRegistration INNER JOIN dbo.Borrowing ON dbo.BookRegistration.[Book_ID] = dbo.Borrowing.[Book_ID]和height值添加到grid-template-rows div的css属性中，如下所示：

page

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});

body{
  overflow-y: hidden;
}

#page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
  height: 200px;
}

#logsContainer {
  overflow-y: scroll;
  height: calc(100% - 18px);
}

这是将列的网格高度设置为容器的100％，在这种情况下，将<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="page"> <div> Commands </div> <div> <div> Logs </div> <div id="logsContainer"> </div> </div> </div> div设置为page，因此您的200px将高度为logsContainer。

Answer 2

您需要确保body的边距为0。我在主体中添加了margin: 0，它与您的代码配合得很好。 Here是工作代码。

div容器可拉伸超过100％的高度

2 个答案: