Let I use transform in this:
.parent {
display: inline-flex;
flex-direction: column;
align-items: center;
}
.first {
height: 100px;
}
.second {
height: 100px;
transform: translateY(-50%);
}
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>
So, after using transform: translateY(-50%); the height of parent element should reduce as it is not using full space. But the height of parent div is still 200px.
How can we remove extra space and I want to use transform only?
https://jsfiddle.net/r4c3g02o/12/
translate only visually moves an element. It does not effect the flow of other elements in the document.
Perhaps the simplest way to achieve your desired result would be a negative margin.
.parent {
border: 1px solid purple;
}
.first {
height: 100px;
background: yellow;
}
.second {
height: 100px;
margin-top: -50px;
background: salmon;
}
<div class="parent">
<div class="first">
First
</div>
<div class="second">
second
</div>
</div>
I think y can use SVG and <animateTransform> so)
Related
I have a wrapper and inside I have 2 divs (left & right). The wrapper takes the height of its content. The left div has a set relative height. What I want is for div right to take 100% of the wrapper height after div left has stretched the wrapper height. How can I achieve this? Thanks in advance.
.wrapper {
width: 100%;
height: fit-content;
background-color: gold;
border:solid 1px red;
}
.wrapper .left {
width: 50%;
height: 20vh;
background-color: pink;
}
.wrapper .right {
width: 50%;
/*something like this*/
height: 100%;
background-color: blue;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
Couple of things here,
Firstly, I am not sure if you actually meant for your right div to be on the right column. As of now, it's rendered below the left.
I assume that's what you wanted, so I'll suggest a fix it accordingly.
Other than that, I think you have the right idea.
Additionally, you do not need the fit-content.
Please let me know if I am missing something.
.wrapper {
width: 100%;
background-color: gold;
border:solid 1px red;
display: flex;
flex-direction: row;
}
.wrapper .left {
width: 50%;
height: 20vh;
background-color: pink;
}
.wrapper .right {
width: 50%;
background-color: blue;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
I have a flexbox wrapper which has two descendants. They both have dynamic height. The second block could be higher than the first one, and I would like to limit the height of the second block to the same as the height of the first one.
.wrapper {
border: 1px solid black;
display: flex;
width: 400px;
margin-bottom: 100px;
}
.left {
background-color: blue;
height: 100px;
width: 200px;
}
.right {
width: 200px;
}
.first {
height: 70px;
background-color: yellow;
}
.second {
height: 70px;
background-color: green;
}
/*desired result */
.fixed-height {
height: 100px;
}
.overflow-value {
overflow: auto;
}
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="first"></div>
<div class="second"></div>
</div>
</div>
<div class="wrapper fixed-height">
<div class="left"></div>
<div class="right overflow-value">
<div class="first"></div>
<div class="second"></div>
</div>
</div>
In the provided example, there two wrappers: the first one is the current wrapper, where the wrapper has the height of the tallest child. And the second one is the desired result (I added height to the wrapper, but I couldn't do it in real application)
CodePen Example
If you insist on using flexbox then there is a way to force the container to just take the height of specific child into account - this can be done by forcing the contents of the second item out of layout context with position: absolute. Unfortunately, this requires adding another wrapper inside the .right element. In addition, having the items positioned absolutely inside the second item will mean that the width of the contents will not be propagated to the .right element, but since your example has an explicit width set, then it works in this case. The code with those modifications is below:
.wrapper {
border: 1px solid black;
display: flex;
width: 400px;
margin-bottom: 100px;
}
.left {
background-color: blue;
height: 100px;
width: 200px;
}
.right {
width: 200px;
position: relative;
overflow: auto;
}
.first {
height: 70px;
background-color: yellow;
}
.second {
height: 70px;
background-color: green;
}
.right-wrapper {
position: absolute;
width: 100%;
}
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="right-wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
</div>
</div>
I want for the boxes to be more responsive, and to keep 1:1 ratio all the time.
When I set min-width to the .box1, .box2 they always take the whole width of the .box ! And it is like they don't respond to height?
I don't want to boxes be full width (or height) of the flex items, since i want some space between them, and I don't want them to overflow their .box container,..( I want keep them inside)
I know I can use media queries to resize the .box1,.box2,.box3, .. but is there any other way?
.grid {
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
//margin:0 -40px;
}
/*first two children*/
.grid>.box:not(:last-child) {
background: grey;
width: 50%;
}
.box1,
.box2,
.box3 {
border: 2px solid #111;
width: 100px;
height: 100px;
transform: rotate(-45deg);
text-align: center;
}
.box1,
.box2 {
margin: 0 auto;
}
.box p {
position: relative;
color: white;
}
<div class="wrapper">
<div class="grid">
<div class="box">
<div class="box1">
<p>Here is something !</p>
</div>
</div>
<div class="box ">
<div class="box2"></div>
</div>
<div class="box ">
<div class="box3"></div>
</div>
</div>
</div>
I didnt get your complete query but if you want to make square responsive without adjusting its height manually then use padding hack
.box1,
.box2,
.box3{
width: 100%;
height: 0;
padding-bottom: 50%;
postition:relative
background: red;
}
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 4 years ago.
Im trying to achieve the following:
Where the blue box is of variable height and the yellow box is always of height 50% of the blue box.
Its fairly simple using flex
<div style="display:flex;align-items:center">
<div id="yellow" style="height:50%">
</div>
</div>
The problem is that im trying to keep the inner box a specific ratio, in this case square. How do i approach this?
Bonus points:
How do i generally specify a ratio? Is there a solution that works not only for 1:1 but any x:y?
How would i do that without using flexbox while potentially still aiming for a)?
Extra information: The blue box is always wider than higher, think a button.
I don't think there is a way to define the width using the height (even if we can do the opposite using some trick like padding) but an idea is to rely on a square image that you make invisible in order to keep the ratio. Then the content should be positionned:
#blue {
display: flex;
align-items: center;
justify-content:center;
height:80vh;
background: blue;
}
#yellow {
height: 50%;
background: yellow;
position:relative;
}
img {
max-height:100%;
visibility:hidden;
}
#yellow .content {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
<div id="blue" >
<div id="yellow" >
<img src="https://picsum.photos/500/500?image=1069" >
<div class="content">Some content here</div>
</div>
</div>
But in case the height of the blue is a fixed value, better rely on CSS variable like this:
#blue {
display: flex;
align-items: center;
justify-content:center;
--h:80vh;
height:var(--h);
background: blue;
}
#yellow {
height: calc(var(--h) / 2);
width:calc(var(--h) / 2);
background: yellow;
position:relative;
}
<div id="blue" >
<div id="yellow" >
<div class="content">Some content here</div>
</div>
</div>
A similar answer to the one provided by Temani Afif, but using an svg instead of an image (so no need to the extra request).
Also, it's easier to adapt it to arbitrary aspect ratios
.container {
height: 150px;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.aspectRatio {
display: grid;
background-color: yellow;
height: 50%;
}
.aspectRatio svg {
height: 100%;
border: solid 1px red;
animation: resize 1s infinite;
}
.aspectRatio > * {
grid-area: 1 / 1 / 2 / 2;
}
#keyframes resize {
from {height: 100%;}
to {height: 99.9%;}
}
<div class="container">
<div class="aspectRatio">
<svg viewBox="0 0 1 1"></svg>
<div class="inner">square</div>
</div>
</div>
<div class="container">
<div class="aspectRatio">
<svg viewBox="0 0 4 3"></svg>
<div class="inner">ratio 4/3</div>
</div>
</div>
See if this can help you,
.outer {
background-color: lightblue;
height: 100px; /* Change as per your requirement */
display: flex;
align-items: center;
justify-content: center;
max-width: 200px; /* You can Remove this */
}
.inner {
background-color: lightyellow;
height: 50%;
width: 50px;
}
<div style="" class="outer">
<div id="yellow" class="inner">
</div>
</div>
If you rotate by 90deg, it's possible :)
variable width and height of the parent (and ratio)
child is always 50% as tall as its parent
and a square
It'll surimpose to other content if it wants to because of the transform though.
⇒ Codepen
.flex {
display: table-cell; /* allows "vertical" centering (not possible with flex/grid here because of the padding-top trick on child) */
width: 12rem;
height: 20rem;
vertical-align: middle; /* "vertical" centering */
transform: rotate(90deg) translateY(-50%); /* vertical becomes horizontal */
background-color: lightblue;
}
.flex.large {
height: 35rem;
}
.item {
width: 50%;
height: 0;
margin-left: 25%; /* "horizontal" centering */
padding-top: 50%; /* padding-top trick for a square */
background-color: lightyellow;
}
<div class="flex">
<div class="item"></div>
</div>
<hr>
<div class="flex large">
<div class="item"></div>
</div>
Try this if it can help you.(with out flex)
.outerdiv
{
background-color: lightblue;
height: 100px;
display: grid;
align-items: center;
}
.innerdiv
{
background-color: lightyellow;
height: 50%;
width: 50px;
margin:0 auto;
}
<div style="" class="outerdiv">
<div id="yellow" class="innerdiv"></div>
</div>
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 4 years ago.
Im trying to achieve the following:
Where the blue box is of variable height and the yellow box is always of height 50% of the blue box.
Its fairly simple using flex
<div style="display:flex;align-items:center">
<div id="yellow" style="height:50%">
</div>
</div>
The problem is that im trying to keep the inner box a specific ratio, in this case square. How do i approach this?
Bonus points:
How do i generally specify a ratio? Is there a solution that works not only for 1:1 but any x:y?
How would i do that without using flexbox while potentially still aiming for a)?
Extra information: The blue box is always wider than higher, think a button.
I don't think there is a way to define the width using the height (even if we can do the opposite using some trick like padding) but an idea is to rely on a square image that you make invisible in order to keep the ratio. Then the content should be positionned:
#blue {
display: flex;
align-items: center;
justify-content:center;
height:80vh;
background: blue;
}
#yellow {
height: 50%;
background: yellow;
position:relative;
}
img {
max-height:100%;
visibility:hidden;
}
#yellow .content {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
<div id="blue" >
<div id="yellow" >
<img src="https://picsum.photos/500/500?image=1069" >
<div class="content">Some content here</div>
</div>
</div>
But in case the height of the blue is a fixed value, better rely on CSS variable like this:
#blue {
display: flex;
align-items: center;
justify-content:center;
--h:80vh;
height:var(--h);
background: blue;
}
#yellow {
height: calc(var(--h) / 2);
width:calc(var(--h) / 2);
background: yellow;
position:relative;
}
<div id="blue" >
<div id="yellow" >
<div class="content">Some content here</div>
</div>
</div>
A similar answer to the one provided by Temani Afif, but using an svg instead of an image (so no need to the extra request).
Also, it's easier to adapt it to arbitrary aspect ratios
.container {
height: 150px;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.aspectRatio {
display: grid;
background-color: yellow;
height: 50%;
}
.aspectRatio svg {
height: 100%;
border: solid 1px red;
animation: resize 1s infinite;
}
.aspectRatio > * {
grid-area: 1 / 1 / 2 / 2;
}
#keyframes resize {
from {height: 100%;}
to {height: 99.9%;}
}
<div class="container">
<div class="aspectRatio">
<svg viewBox="0 0 1 1"></svg>
<div class="inner">square</div>
</div>
</div>
<div class="container">
<div class="aspectRatio">
<svg viewBox="0 0 4 3"></svg>
<div class="inner">ratio 4/3</div>
</div>
</div>
See if this can help you,
.outer {
background-color: lightblue;
height: 100px; /* Change as per your requirement */
display: flex;
align-items: center;
justify-content: center;
max-width: 200px; /* You can Remove this */
}
.inner {
background-color: lightyellow;
height: 50%;
width: 50px;
}
<div style="" class="outer">
<div id="yellow" class="inner">
</div>
</div>
If you rotate by 90deg, it's possible :)
variable width and height of the parent (and ratio)
child is always 50% as tall as its parent
and a square
It'll surimpose to other content if it wants to because of the transform though.
⇒ Codepen
.flex {
display: table-cell; /* allows "vertical" centering (not possible with flex/grid here because of the padding-top trick on child) */
width: 12rem;
height: 20rem;
vertical-align: middle; /* "vertical" centering */
transform: rotate(90deg) translateY(-50%); /* vertical becomes horizontal */
background-color: lightblue;
}
.flex.large {
height: 35rem;
}
.item {
width: 50%;
height: 0;
margin-left: 25%; /* "horizontal" centering */
padding-top: 50%; /* padding-top trick for a square */
background-color: lightyellow;
}
<div class="flex">
<div class="item"></div>
</div>
<hr>
<div class="flex large">
<div class="item"></div>
</div>
Try this if it can help you.(with out flex)
.outerdiv
{
background-color: lightblue;
height: 100px;
display: grid;
align-items: center;
}
.innerdiv
{
background-color: lightyellow;
height: 50%;
width: 50px;
margin:0 auto;
}
<div style="" class="outerdiv">
<div id="yellow" class="innerdiv"></div>
</div>