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.
Related
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>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I'd like to have a horizontally and vertically centered cards. I've done it like this.
*{
margin: 0;
padding: 0;
}
.wrapper{
background-color: darkkhaki;
width: 700px;
height: 700px;
}
.cards{
display: flex;
justify-content: center;
align-items: center;
}
.card{
width: 100px;
height: 250px;
background-color: chartreuse;
border: crimson 2px solid;
}
<div class="wrapper">
<div class="text">
<p>Lorem ipsum</p>
</div>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
However, the vertical center doesn't occur (just the horizontal).
The same happens when I try it with the "text" class.
Thank you for your help :)
In order to center align content, you need at least 1 defined height so the container knows where the "center" is. With flexbox it's as easy then setting justify-content: center and align-items: center to make sure any flex item goes to the center of the container.
What you are missing in your code, is a height for the cards container. You could set a number for it, or just heigth: 100% so it takes the full height of its own container (wrapper) which is 700px
body {
margin: 0
}
.flex-item {
border: 1px solid black;
height: 100px;
width: 150px
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div class="flex-container">
<div class="flex-item"></div>
</div>
Here's your code
* {
margin: 0;
padding: 0;
}
.wrapper {
background-color: darkkhaki;
width: 700px;
height: 700px;
}
.cards {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.card {
width: 100px;
height: 250px;
background-color: chartreuse;
border: crimson 2px solid;
}
<div class="wrapper">
<div class="text">
<p>Lorem ipsum</p>
</div>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Simple, set margin: 0 auto; on the main container that holds everything together. In your case, that appears be the main <div> with the wrapper class:
.wrapper {
background-color: darkkhaki;
width: 700px;
height: 700px;
margin: 0 auto;
}
That should do the trick.
Simply add the total height (100% or 100h) to the cards class.
.cards{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
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:
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>
I have 2 divs inside a parent:
<div class="parent">
<div class="foo1"></div>
<div class="foo2"></div>
</div>
foo1 will have a dynamic height, so I can't use the style below:
height: calc(100% - foo1Height);
Now, what I want to do is make sure that the lower child foo2 never expands outside of the parent div, and to show the scrollbar if it gets too big. I would prefer CSS only solutions.
You can either use flexbox. no markup changes.
.parent {
display: flex;
flex-direction: column;
height: 100px;
}
.foo2 {
flex: 1; /*expand to fit*/
background: silver;
overflow: auto; /*scroll as needed*/
}
<div class="parent">
<div class="foo1">1</div>
<div class="foo2">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>
Or use CSS table, additional markup is required.
.parent {
display: table;
width: 100%;
height: 100px;
}
.foo1, .foo2 {
display: table-row;
}
.cell {
display: table-cell;
position: relative;
}
.foo2 {
height: 100%; /*expand to fit*/
background: silver;
}
.scroll {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto; /*scroll as needed*/
}
<div class="parent">
<div class="foo1">
<div class="cell">1</div>
</div>
<div class="foo2">
<div class="cell">
<div class="scroll">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>
</div>
</div>