时间戳

首页 > 解决方案 > .child-div 溢出 .parent-div

html - .child-div 溢出 .parent-div

问题描述

伙计们！

我正在制作一个自己的投资组合网站。这个想法是制作全高页面。所以关于这个，我有两个问题。

  1. 如何使 .child-div 不大于其 .parent-div？
  2. 如何使 p 元素的高度不大于其 .child-div？

认为这两个问题都有一些（可能是相同的）解决方案。

溢出不是一种选择，因为它只是隐藏了元素的其余部分。

我试图将 .parent 设置为 display: table 和 .child 作为 display: table-cell 但我没有成功。UPD：还尝试在 .parent 和之间创建一个表行 div。子宽度宽度：100% 和高度：33%。不幸的是没有预期的结果..

下面是它应该是什么样子的示例，但是 .child 溢出了 .parent。 

html {
  height: 100%;
}
body {
  height: 100%;
  max-width: 960px;
  margin: 15px auto;
}
.parent {
  height: 100%;
  border: 1px solid red;
}
.child-30 {
  min-height: calc(100%/3);
  width: 27%;
  margin: 10px;
  border: 1px solid green;
}
.child-70 {
  min-height: calc(100%/3);
  width: 67%;
  margin: 10px;
  border: 1px solid green;
}
.left {
  float: left;
}
.right {
  float: right;
}
@media only screen and (max-width: 750px) {
  .child-30, .child-70 {float: left; width: 100%;}
}
<div class="parent">
  <div class="child-30 left"></div>
  <div class="child-70 right"></div>
  <div class="child-70 left"></div>
  <div class="child-30 right"></div>
  <div class="child-30 left"></div>
  <div class="child-70 right"></div>
</div>

这是链接在段落中的外观

这里同样的问题

标签： htmlcssoverflow

解决方案

对于第一个问题，我有一个答案：

@media only screen and (max-width: 750px) {
  .child-30, .child-70 {float: left; width: calc(100% - 20px);}
}

为什么width: calc(100% - 20px)？因为您为 .child-30 和 .child-70 使用边距（边距：10px 是边距顶部，边距右，边距底部，边距左 = 10px 和宽度的总边距右和边距左 -> 所以20 像素。

推荐阅读