具有％height的容器弹出窗口内的嵌套div：添加填充将移动弹出窗口外的div

Question

注意：我看了这个问题： Can't Prevent Nested Div's from Overflowing when using Percent Sizes and Padding in CSS? 并尝试使用box-sizing: border-box;，但它似乎无法解决问题。

问题：

我有一个弹出式容器，其中包含不同的可堆叠可滚动div，其高度以百分比形式设置。 如果我不使用padding，一切都会运作良好。如果我添加填充，一切都会向下移动，div会显示在弹出窗口之外。

如何以{百分比高度使用padding？

这是我的示例代码：

<div class="cardinfobutton">
  <a href="#popup">click me</a>
</div>


<div id="popup" class="infooverlay">
  <div class="infopopup">
    <div class="content-top">
      <p>This goes at the top</p>
    </div>
    <div class="title">
      <h2>Title 1</h2>
    </div>
    <div class="content-body">
      <p>
        Long text, it has to be scrollable
      </p>
    </div>

    <div class="title">
      <h2>Title 2</h2>
    </div>
    <div class="content-body">
      <p>
         Long text, it has to be scrollable
      </p>
    </div>
    <div class="content-bottom">
      <p>This goes at the bottom</p>
    </div>
  </div> <!-- close infopopup -->
</div> <!-- close infooverlay -->

这里是CSS代码：

html,
body {
  height: 100%;
}

.content-top,
.content-bottom {
  padding: 10px 0px 10px 0px;
}

.title {
  padding: 10px;
}
.content-body {
  max-height: 30%;
  overflow: auto;
}

.infooverlay {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.infooverlay:target {
  visibility: visible;
  opacity: 1;
  box-sizing: border-box;
}

.infopopup {
  box-sizing: border-box;
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  height: 75%;
  transition: all 5s ease-in-out;
  position: relative;
  padding: 5px 20 5px 20;
}

您可以在此codepen中找到显示问题的示例代码：

https://codepen.io/riclab/pen/XePbxR

非常感谢！

Answer 1

你在弹出窗口中有一个固定的高度，所以内容不适合它，

你可以在.infopopup类中添加样式'overflow：auto'来阻止内容掉落到我们的框中， 除此之外，我可能会从弹出窗口中的内容容器中删除最大高度，因此您没有太多滚动条。

n.b。你的一个填充属性也缺少单位， 它应该是“5px 20 5px 20”，应该说20px或20％，例如

Answer 2

使用flex工作正常。我还在.content-body中添加了一些最小高度，以便在最小高度屏幕上显示内容。

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}

.content-top,
.content-bottom {
  padding: 10px 0px 10px 0px;
}

.title {
  padding: 10px;
}

.content-body {
  min-height: 50px;
  overflow: auto;
}

.infooverlay {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.infooverlay:target {
  visibility: visible;
  opacity: 1;
  box-sizing: border-box;
}

.infopopup {
  box-sizing: border-box;
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  height: 75%;
  transition: all 5s ease-in-out;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

＆＃13;

<div class="cardinfobutton">
  <a href="#popup">click me</a>
</div>


<div id="popup" class="infooverlay">
  <div class="infopopup">
    <div class="content-top">
      <p>This goes at the top</p>
    </div>
    <div class="title">
      <h2>Title 1</h2>
    </div>
    <div class="content-body">
      <p>
        Exercitation minim ex sit commodo anim magna in dolore minim occaecat irure eu est pariatur. Ut tempor ex adipisicing lorem cupidatat aliquip consequat. Voluptate ex velit magna id voluptate officia amet, ut consectetur excepteur aute duis aliquip dolore
        ea ipsum labore dolor excepteur do magna veniam, eiusmod deserunt ut velit commodo esse aliqua. Ut amet, nisi sed nulla ullamco i. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt
        anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco
        lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate
        id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi
        exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat
        eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur.
        Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam,
        sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor
        aliquip fugiat eiusmod esse sit ullamco lorem exercitatio.
      </p>
    </div>

    <div class="title">
      <h2>Title 2</h2>
    </div>
    <div class="content-body">
      <p>
        Exercitation minim ex sit commodo anim magna in dolore minim occaecat irure eu est pariatur. Ut tempor ex adipisicing lorem cupidatat aliquip consequat. Voluptate ex velit magna id voluptate officia amet, ut consectetur excepteur aute duis aliquip dolore
        ea ipsum labore dolor excepteur do magna veniam, eiusmod deserunt ut velit commodo esse aliqua. Ut amet, nisi sed nulla ullamco i. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt
        anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco
        lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate
        id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi
        exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat
        eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur.
        Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam,
        sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor
        aliquip fugiat eiusmod esse sit ullamco lorem exercitatio.
      </p>
    </div>
    <div class="content-bottom">
      <p>This goes at the bottom</p>
    </div>
  </div>
  <!-- close infopopup -->
</div>
<!-- close infooverlay -->

＆＃13;

＆＃13;

＆＃13;