This question already has an answer here:
Hover over class and modify another class
(1 answer)
Closed 9 months ago.
I am trying to change the width of the sidebar that sets inside a parent grid layout when it's hovered on
Such that the sidebar width now is 64px but when hover on becomes 120px
.container{
display:grid;
height: 100vh;
width: 100vw;
grid-template-areas: "sidebar content";
grid-template-columns: 64px auto;
}
.sidebar{
grid-area:sidebar;
background-color: black;
}
.content{
grid-area:content;
background-color:red;
}
/* this part */
.sidebar:hover{
grid-column:120px;
}
<div class="container">
<div class= "sidebar">
</div>
<div class="content">
</div>
</div>
For me it seem logic to use flexbox in this case, as you cannot target the parent when the child (the sidebar) is hovered.
body {
margin:0;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
}
.sidebar {
background-color: black;
width: 64px;
transition: 0.3s ease;
}
.content {
background-color: red;
flex-grow: 1;
}
/* this part */
.sidebar:hover {
width: 120px;
}
<div class="container">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 3 months ago.
Here is the CSS I have applied CSS to wrapper, header and footer, and I tried to cover the remaining part of the screen with the between container but I am not able to do it.
.wrapper {
height: 100vh;
}
.header {
width: 100vw;
display: flex;
position: absolute;
top: 0;
}
.between {}
.footer {
position: absolute;
bottom: 0;
width: 100vw;
}
<div class="wrapper">
<div class="header"></div>
<div class="between"></div>
<div class="footer"></div>
</div>
you can use display: flex for this, use flex:1 to the child you want to take up available space.
.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background: red;
height: 10px;
}
.between {
background: green;
flex: 1;
}
.footer {
background: yellow;
height: 10px;
}
<div class="wrapper">
<div class="header"></div>
<div class="between"></div>
<div class="footer"></div>
</div>
read more about css flexbox box here.
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
How to stretch children to fill cross-axis?
(3 answers)
Closed 4 years ago.
I have this html, a simple skeleton for admin panel:
body {margin: 0}
.adminpanel {
display: flex;
height: 100vh;
}
.leftpane {
width: 250px;
background-color: #0038a8;
}
.rightpane {
width: 87%;
background-color: #ce1126;
}
<div class="adminpanel">
<div class="leftpane">
left
</div>
<div class="rightpane">
right
</div>
</div>
From the code above, I set .leftpane to have a width of 250px. How do I set the .rightpane to occupy the remaining width?
Using width: 87%; works on my laptop width with a 1900px resolution.
Any ideas?
I work on admin panel before but with css framework, which is not in this case.
You can use flex-grow:1; on the right pane and remove the width:
.adminpanel {
display: flex;
flex-direction: row;
height: 100vh;
}
.leftpane {
width: 250px;
background-color: #0038a8;
}
.rightpane {
background-color: #ce1126;
flex-grow: 1;
}
<div class="adminpanel">
<div class="leftpane">
left
</div>
<div class="rightpane">
right
</div>
</div>
You can use either:
.rightpane { flex-grow: 1; }
Or the old school:
.rightpane { width: calc(100% - 250px); }
body {margin: 0}
.adminpanel {
display: flex;
height: 100vh;
}
.leftpane {
width: 250px;
background-color: #0038a8;
}
.rightpane {
flex-grow: 1;
/*or width: calc(100% - 250px) */
background-color: #ce1126;
}
<div class="adminpanel">
<div class="leftpane">
left
</div>
<div class="rightpane">
right
</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>
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:
Why is padding expanding a flex item?
(4 answers)
Closed 4 years ago.
I have a flexbox with two children. I want both children to have equal size, despite that one has padding and the other doesn't.
Here's a demo. I want the blue and green boxes to be equal in size:
html, body, .container {
margin: 0;
width: 100%;
height: 100%;
}
.container {
display: flex;
}
.container div {
flex: 1;
min-width: 0;
flex-basis: 0;
}
.first {
background: cornflowerblue;
}
.second {
background: lightgreen;
padding: 100px;
}
<div class="container">
<div class="first"> </div>
<div class="second"> </div>
</div>
I know that I could use width: 50%, but that's not direction-agnostic and breaks if I add more elements.
You need both the divs to be the 50% (flex:1) and then have another div inside the second one that has the padding. That way both the parents have the same width and the second one has the padding within it.
html, body, .container {
margin: 0;
width: 100%;
height: 100%;
}
.container {
display: flex;
}
.container > div {
flex: 1;
}
.first {
background: cornflowerblue;
}
.second {
background: lightgreen;
}
.second > div {
padding: 100px;
}
<div class="container">
<div class="first">first</div>
<div class="second">
<div>second</div>
</div>
</div>