There is container:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
Block class="container" has height of screen height.
How to make the same height for block1, block2? so that they occupy the entire height of the parent?
I have tried flex
grid can help you here without even setting an height which can be optionnal , mind box-sizing if height, borders and paddings are involved:
.container {
display: grid;
grid-template-rows: repeat(2, 1fr);/* the keyword for the value : 1fr */
}
.container>div {
border: solid;
}
<div class="container">
<div class="block1">give<br>me<br>some<br>heights</div>
<div class="block2"></div>
</div>
usefull link to know more about it https://css-tricks.com/snippets/css/complete-guide-grid/
flex would be for te browser's height:
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.container>div {
flex: 1;
border: solid;
margin: 2px;
/* possible*/
}
/* reset */
body {
margin: 0;
height: 100vh;
}
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
You can use flex to get this done. You could also use float and set the height of the blocks to 100% and the widths of them to 50%.
.container {
height: 100vh;
display: flex;
flex-direction: column;
border: 4px red solid;
}
.block1, .block2 {
height: 50%;
}
.block1 {
border: 4px green solid;
}
.block2 {
border: 4px blue solid;
}
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
Related
I have encountered an issue regarding CSS's aspect-ratio on child elements.
I've been trying to style an element's width and height (both the same) to be equal to the height of the parent container. Using height: 100%; and aspect-ratio: 1; makes this work, however;
It seems the parent container ignores the children's resized width when using aspect-ratio, meaning the parent container ends up with the wrong width.
I've included a codepen illustrating the issue. Notice how the width does increase with each new element, but the width increase does not correspond to the actual width of the added elements.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 8px;
}
.container {
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: stretch;
column-gap: 16px;
width: fit-content;
}
.button_container {
display: flex;
column-gap: 8px;
border: 1px solid green;
width: fit-content;
}
.button {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
}
.first_case {
height: 100%;
aspect-ratio: 1 / 1;
}
.second_case {
height: 100%;
width: 56px;
}
<p>Fixed width (this is how it should look)</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button second_case">
A
</div>
<div class="button second_case">
B
</div>
</div>
</div>
<p>Aspect ratio</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button first_case">
A
</div>
<div class="button first_case">
B
</div>
</div>
</div>
https://codepen.io/th3o4or/pen/ZEoqMrm
I have encountered an issue regarding CSS's aspect-ratio on child elements.
I've been trying to style an element's width and height (both the same) to be equal to the height of the parent container. Using height: 100%; and aspect-ratio: 1; makes this work, however;
It seems the parent container ignores the children's resized width when using aspect-ratio, meaning the parent container ends up with the wrong width.
I've included a codepen illustrating the issue. Notice how the width does increase with each new element, but the width increase does not correspond to the actual width of the added elements.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 8px;
}
.container {
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: stretch;
column-gap: 16px;
width: fit-content;
}
.button_container {
display: flex;
column-gap: 8px;
border: 1px solid green;
width: fit-content;
}
.button {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
}
.first_case {
height: 100%;
aspect-ratio: 1 / 1;
}
.second_case {
height: 100%;
width: 56px;
}
<p>Fixed width (this is how it should look)</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button second_case">
A
</div>
<div class="button second_case">
B
</div>
</div>
</div>
<p>Aspect ratio</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button first_case">
A
</div>
<div class="button first_case">
B
</div>
</div>
</div>
https://codepen.io/th3o4or/pen/ZEoqMrm
I have a simple grid layout, that has a limited height and scrolls.
.outer {
border: 1px solid red;
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
max-height: 150px;
overflow-y: scroll;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
<div class="outer">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
</div>
The padding is being applied at the top, left and right of the grid:
But when I scroll down, the padding on the bottom isn't applied:
If I remove the max-height the padding at the bottom is now applied:
Why isn't the bottom padding being used? How can I ensure padding works on a grid item with limited height?
Clarity around overflow and padding is a current issue in the CSS spec and the behavior may differ based on each case.
Until the spec is clarified or browsers change their behavior, a workaround for your use case is to add an empty element at the end (since your padding is equal to the gap).
.outer {
border: 1px solid red;
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
max-height: 150px;
overflow-y: scroll;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
.outer::after {
content:"";
height:0.1px;
}
<div class="outer">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
</div>
You need to wrap the inner content with a div/container and give the container the grid display, in that case the padding will be applied on that div.
.outer {
border: 1px solid red;
max-height: 150px;
overflow-y: scroll;
}
.outer-content {
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
HTML
<div class="outer">
<div class="outer-content">
<div class="inner">one</div>
<div class="inner">Two</div>
</div>
</div>
I need to preserve the aspect ratio of several divs using flex, cross browser. The divs contain charts and diagrams as SVGs, not IMGs.
I have a preferred solution working in firefox (https://jsfiddle.net/2d5hcfbo/4/), and another working in IE (https://jsfiddle.net/229oo3br/2/), but neither solution works in both. These were based on this answer. When looking at the Jsfiddles, if you increase the width of the output window (by dragging the middle column boundary to the left) you'll see the yellow divs turn pink and a Filter column is added (#media queries).
In both cases, the problem is that the divs seem to default to text height + padding. They need to stay oblong, broadly 1.5 times as wide as high. Also in IE the divs overlap each other and the font aligns low.
The FF solution uses flex-basis: 30vw; to set the height based on the width (flex-direction = column). (Height: 30vw doesn't work, not sure why.) This works in Chrome too.
The IE solution uses padding-top: 16.67%; to affect the height. This method has never been intuitive to me but I'd use it if it worked in FF.
I'm using IE 11 and FF45.9. I understand IE11 has/had a bug in this area(https://github.com/philipwalton/flexbugs/issues/71) but I can't avoid the browser. Thanks for any help!
Edit: I can make both declarations. But is there a better way?
CSS:
div#container {
/*position: relative;*/
padding-top: 50px;
display: flex;
/*flex-direction: row wrap;*/
/*align-items: stretch;*/
}
div#column1 {
flex: 0 0 auto;
background-color: white;
box-shadow: 3px 0px 10px #bebebe;
z-index: 9999;
overflow-y: scroll;
}
div#column2 {
display: flex;
flex-direction: column;
}
.row { display: flex; }
.row--top { flex: 2;}
.row--bottom { flex: 1; }
.cell {
flex: 1;
padding: 0.5em;
background-color: white;
margin: 1em;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}
.cell-wrap {
flex-basis: 31%;
display: flex;
flex-direction: column;
}
.cell-wrap div {
margin-left:0;
}
div.row--top div#cell1,
div.row--top div.cell-wrap div {
margin-bottom: 0;
}
div.fullwidth { width: 100%; }
div.fullheight { height: 100%; }
#media screen and (max-width: 1100px) {
#container {
height: auto;
}
.row { flex-direction: column; }
.cell {
flex-grow: 1;
background-color: pink;
/* flex-basis: 30vw; */
padding-top: 16.67%;
}
/*.flex.padding div {
padding-top: 16.67%;
}*/
#cell4 {
margin-bottom: 0;
}
.cell-wrap {
width: 100%;
flex-direction: column;
}
.cell-wrap div {
margin-left:1em;
}
}
#media screen and (max-width: 700px) {
.cell {
/*flex-grow: 0;*/
background-color: yellow;
padding-top: 16.67%;
/* flex-basis: 50vw; */
}
div#column1 {
display: none;
}
}
HTML:
<div id="container" class="fullheight fullwidth">
<div class="fullheight" id="column1">
<div id="filterRow">
<div class="selectHolder" id="filters"><h1>Filter</h1><div class="spanHolder">
</div></div>
</div>
</div>
<div class="fullheight fullwidth" id="column2">
<div class="row row--top">
<div class="cell" id="cell1">cell one</div>
<div class="cell-wrap">
<div class="cell" id="cell2">cell two</div>
<div class="cell" id="cell3">cell three</div>
</div>
</div>
<div class="row row--bottom">
<div class="cell" id="cell4">cell four</div>
<div class="cell-wrap">
<div class="cell" id="cell5">cell five</div>
</div>
</div>
<!-- </div> -->
</div>
</div>
Perhaps IE requires re-declaration of the default flex property within media queries. Adding back default declaration flex: 0 1 auto did the trick.
Thanks to Michael_B for the pointer. Fix here: https://jsfiddle.net/2d5hcfbo/9/
So I'm struggling to achieve this simple concept with CSS and i've also searched the entire internet but couldn't find anything. I think I'm just not wording it correctly so a visual image of what i'm trying to do is this:
The top box should be positioned on top and the bottom one should be positioned at the bottom. Then the boxes in between them should have equal spacing on top and bottom. This is more like the vertical version of this answer: https://stackoverflow.com/a/6880421/7150896
You can use Flexbox for this. You just need to set flex-direction: column and justify-content: space-between.
body,
html {
margin: 0;
padding: 0;
}
.content {
display: flex;
height: 250px;
border: 1px solid black;
justify-content: space-between;
flex-direction: column;
width: 200px;
}
.box {
background: #0479D9;
height: 50px;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
You can also achieve this using grid css layout:
.content {
display: grid;
align-content: space-between;
height: 275px;
border: 1px solid black;
width: 200px;
}
.box {
background: #0479D9;
height: 75px;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>