CSS：box-sizing继承

Question

我正在使用cssmaterialize并且他们有一个＆＃34;弹出＆＃34;键入他们称之为模态的东西。当我在弹出的页面中使用它时，如果它变大，那么它会增加一个我不想要的滚动条：

我不想要滚动条，因为正如您在图像中看到的那样，弹出窗口仍然有一定的空间可以向下延伸一点而不需要弹出窗口。

我决定使用chromes inspect元素功能查看css并尝试解决这个小问题。我找不到任何与其高度相关的东西。我认为它唯一与之相关的是它所说的box-size inherit

如果有人想看CSS，这里是我正在使用的库的链接：

http://materializecss.com/

Answer 1

在浏览完CSS后，我发现了模态高度的处理位置：

.modal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 80%;
  width: 55%;
  margin: auto;
  overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity; }
  @media only screen and (max-width : 992px) {
    .modal {
      width: 80%; } }
  .modal h1, .modal h2, .modal h3, .modal h4 {
    margin-top: 0; }
  .modal .modal-content {
    padding: 24px; }
  .modal .modal-close {
    cursor: pointer; }
  .modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%; }
    .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
      float: right;
      margin: 6px 0; }

max-height为70％我将其更改为80％并解决了我的问题。

Answer 2

您可以使用overflow：hidden;

删除滚动条