guys!
I'm making an own portfolio website. The idea is to make full height pages. So regarding this, I got 2 questions.
- How can I make .child-div not larger than its .parent-div?
- 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