0
votes

guys!

I'm making an own portfolio website. The idea is to make full height pages. So regarding this, I got 2 questions.

  1. How can I make .child-div not larger than its .parent-div?
  2. How can I make p-elements height not larger than its .child-div?

Thinking that there is some (maybe the same) solution to both problems.

Overflow is not an option, because it just hide the rest of element.

I tried to set .parent as display: table and .child as display: table-cell but I didn't succeed. UPD: Also tried to make an table-row div between .parent and. child width width: 100% and height: 33%. Unfortunately without expected result..

Here is the example how it should look like, but .child overflows the .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>

And here is the link how it should look like with paragraphs

Same problem here

3

3 Answers

0
votes

I have an answer to the first question:

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

Why width: calc(100% - 20px)? Because you use margin for .child-30 and .child-70 (margin: 10px is margin-top, margin-right, margin-bottom, margin-left = 10px and on width's summed margin-right and margin-left -> so 20 pixels.

0
votes

You assign a relative min-height size to the container to each element. If you're sure you'll have 3 rows of blocks, you can use the min-height with just a small fix: min-height: calc(100% / 3 - 22px)

Why -22 ? - 10 for each margin (top and bottom) - 1 for each border (top and bottom) = 22

This is a problem at resize because you will have 6 rows of blocks with 100%/3 (which is 200% instead of 100%). So you need to do a min-height: calc (100% / 6 - 22px) in order to get 100% of the total size of the blocks.

Find bellow the modified code with the Kamil Pikula suggestions for the width.

BUT, if the size of your blocks are dynamic and you do not want to use overflow or ellypsis, it will not work with min-height. You'll have to use dynamic height and make line breaks for each line with a system like 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>
0
votes

Check this out, although it is better if it is full page. https://jsfiddle.net/indefinite/g7aqvkoy/33/

I removed height:100% in your .parent and added

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