Question

伙计们！

我正在建立自己的投资组合网站。想法是制作全高页面。因此，我有两个问题。

如何使.child-div不大于其.parent-div？
如何使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>

这是段落的链接

Same problem here

Answer 1

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

@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使用margin（margin：10px是margin-top，margin-right，margin-bottom，margin-left = 10px以及宽度的margin-right和margin-left的总和->因此20像素。

Answer 2

您将容器的相对min-height大小分配给每个元素。如果您确定将有3行块，则可以使用最小高度的最小高度：min-height: calc(100% / 3 - 22px)

为什么要-22？ -每个边距为10（顶部和底部） -每个边框1个（顶部和底部）= 22

这是调整大小时的问题，因为您将有6行块的100％/ 3（即200％而不是100％）。因此，您需要执行min-height: calc (100% / 6 - 22px)才能获得块总大小的100％。

在经过修改的代码中找到Kamil Pikula个宽度建议。

但，如果块的大小是动态的，并且您不想使用溢出或省略号，则它不适用于min-height。您必须使用动态高度，并使用boostrap clearfix之类的系统对每行进行换行。

html {
  height: 100%;
}
body {
  height: 100%;
  max-width: 960px;
  margin: 15px auto;
}
.parent {
  height: 100%;
  border: 1px solid red;
}
.child-30 {
  height: auto;
  min-height: calc(100%/3 - 22px);
  width: 27%;
  margin: 10px;
  border: 1px solid green;
}
.child-70 {
  min-height: calc(100%/3 - 22px);
  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: calc(100% - 22px);
    min-height: calc(100%/6 - 22px);
    }
}

<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>

Answer 3

请检查此内容，尽管最好是整页。 https://jsfiddle.net/indefinite/g7aqvkoy/33/

我从您的height:100%中删除了.parent 并添加了

.parent::after{
  content: "";
    clear: both;
  display: table;
}

html {
  height: 100%;
   padding:10px;
}
body {
  height: 100%;
  max-width: 960px;
  margin: 15px auto;
  padding:10px;
}
.parent {
  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;
}
.parent::after{
  content: "";
    clear: both;
  display: table;
}
@media only screen and (max-width: 750px) {
 .parent{
   display:flex;
   flex-direction:column;
 }
.child-30 {
   width: 97%;
}
 .child-70{
   width:97%;

 }
  .parent::after{
  content: "";
    clear: both;
  display: table;
}

}

<div class="parent clearfix">
  <div class="child-30 left">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </p>
  </div>
  <div class="child-70 right">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
    </p>
  </div>
  <div class="child-70 left">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </p>
  </div>
  <div class="child-30 right">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </p>
  </div>
  <div class="child-30 left">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </p>
  </div>
  <div class="child-70 right">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </p>
  </div>
</div>
<br/><br/>

.child-div溢出.parent-div

3 个答案: