<div>
<div>
hello1
</div>
<div>
hello2
</div>
</div>
I want the two inner div's to take/fill up the whole space of the outer div (height/vertically). But both inner div's should have the equal height
You can use CSS' flexbox, see my example below:
.row {
display: flex;
}
.col {
border: 1px solid;
flex: 1;
}
<div class="row">
<div class="col">
hello1
</div>
<div class="col">
hello2<br>
same height!
</div>
</div>
Related
Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>
I'm learning Bootstrap and I'm trying to figure out how to automatically adjust a rows height given this conditions:
There are 3 rows within a container-fluid
row1 must adjust to the height of its content
row3 must adjust to the height of its content and be at the bottom of the viewport
row2 should adjust its height to the space between row1 and row3 to fill the container-fluid
html, body, .container-fluid {
height: 100%;
background: lightyellow;
}
.col {
border: solid 1px #6c757d;
}
.content-1 {
height: 50px;
background-color: lightcoral;
}
.content-2 {
height: 200px;
background-color: lightgreen;
}
.content-3 {
height: 25px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="content-1">
ROW 1 -> Height of its content
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-2">
ROW 2 -> Height between row1 and row3 automatically adjusted
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-3">
ROW 3 -> Height of its content
</div>
</div>
</div>
</div>
JSFiddle demo
What would be the best approach to do so?. Thank you in advance!
You're looking for the flexbox utility classes. d-flex is for display:flex, and flex-grow-1 will make the 2nd child div fill the remaining height. Use flex-column as you want a vertical layout.
<div class="container-fluid d-flex flex-column">
<div class="row">
<div class="col">
<div class="content-1">
ROW 1 -> Height of its content
</div>
</div>
</div>
<div class="row flex-fill">
<div class="col d-flex flex-column">
<div class="content-2 h-100">
ROW 2 -> Height between row1 and row3 automatically adjusted
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-3">
ROW 3 -> Height of its content
</div>
</div>
</div>
</div>
https://www.codeply.com/go/IIVJqGJ2qG
Note: The fixed heights set in the custom CSS have been removed to allow the header/footer to be the height of their content, and the content row to fill the remaining height.
Related:
Bootstrap 4: How to make the row stretch remaining height?
Bootstrap - Fill fluid container between header and footer
I see you use bootstrap 4. But anyone who use bootstrap 3 or not at all using any CSS libraries, then the solution would be the code below.
.parent-row{
display: flex;
}
.children-columns{
display: flex;
}
Wanted: a CSS only solution to enable equal height grid "sections" on a per row basis, that is also responsive.
This diagram hopefully explains the requirement better than the words in this post will:
The "item grid" should be responsive - in that it can show a different number of cards per row based on viewport width. And within a given row, the equivalent sections should have the same height on a "per row" basis.
In the below HTML & CSS - the item cards are split in to the rows that we need (at the two example break points desktop & mobile) but the content section heights are variable (yuck):
.items {
max-width: 1200px;
}
.item {
width: 25%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
padding: 0 12px;
margin: 24px -4px 24px 0;
}
#media (max-width: 600px) {
.item {
width: 50%;
}
}
.item__heading {
background-color: #d4d0f5;
padding: 10px;
text-align: center;
border: 1px solid #bbbbbb;
}
.item__content {
padding: 10px;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
}
.item__price {
background-color: #e0f6d9;
padding: 10px;
text-align: center;
border: 1px solid #bbbbbb;
}
<div class="items">
<div class="item">
<div class="item__heading">
Item 1
</div>
<div class="item__content">
Some content that is not that long
</div>
<div class="item__price">
£99.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 2
</div>
<div class="item__content">
Some content that is longer than other items on the same row and sets the height of this section
</div>
<div class="item__price">
£69.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 3
</div>
<div class="item__content">
Some content that is not that long
</div>
<div class="item__price">
£69.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 4
</div>
<div class="item__content">
Some content that is not that long
</div>
<div class="item__price">
£109.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 5
</div>
<div class="item__content">
Some content that is a medium kind of length blah blah
</div>
<div class="item__price">
£29.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 6
</div>
<div class="item__content">
Some content that is not that long
</div>
<div class="item__price">
£99.99
</div>
</div>
</div>
The following codepen is a JavaScript based solution that achieves the desired outcome -
but is what I am trying to avoid:
https://codepen.io/rusta/pen/KmbVKd
Limitations
The number of items to be displayed in the grid list can be any number from 1-150
The size of the item content to be displayed will be genuinely variable (so picking a "sensible" min-height is not an option)
I was hoping that the new CSS Grid system would help me achieve the above, but having played with it for a while it seems to need a bit more structure than I had hoped it would, and the responsive aspect seemed rather challenging. But maybe there is a CSS Grid based answer out there somewhere
Further note: I say a CSS only solution, by which I mean a non-JS solution. If the HTML blocks need to change (order/nesting/class names) to support a non-JS solution that is absolutely fine
In this trivial example - we are only focusing on the "content" section for having "matching heights" - as we can assume the heading and price sections will naturally be the same height. It would be nice to enable "equivalency" across any matching grid section (header/content/price/other) but that can be for another day...
By giving the .items display: flex; flex-wrap: wrap; your item will become flex items and flow from left to right and wrap when there is no more space.
Then you give the .item display: flex; flex-direction: column;, which will make them a flex container as well, and by using column direction, its children will flow vertically, like block elements.
Finally you give the .item__content flex: 1;, which will make it take any remaining space, vertically, hence every row's item will have equal height.
Updated codepen
Stack snippet
.items {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
}
.item {
display: flex;
flex-direction: column;
width: 25%;
box-sizing: border-box;
vertical-align: top;
padding: 0 12px;
margin: 24px -4px 24px 0;
}
#media (max-width: 600px) {
.item {
width: 50%;
}
}
.item__heading {
background-color: #d4d0f5;
padding: 10px;
text-align: center;
border: 1px solid #bbbbbb;
}
.item__content {
flex: 1 1 auto; /* IE need 1 1 auto */
padding: 10px;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
}
.item__price {
background-color: #e0f6d9;
padding: 10px;
text-align: center;
border: 1px solid #bbbbbb;
}
<div class="items">
<div class="item">
<div class="item__heading">
Item 1
</div>
<div class="item__content">
Some content that is not that long
</div>
<div class="item__price">
£99.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 2
</div>
<div class="item__content">
Some content that is longer than other items on the same row and sets the height of this section
</div>
<div class="item__price">
£69.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 3
</div>
<div class="item__content">
Some content that is not that long
</div>
<div class="item__price">
£69.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 4
</div>
<div class="item__content">
Some content that is not that long
</div>
<div class="item__price">
£109.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 5
</div>
<div class="item__content">
Some content that is a medium kind of length blah blah
</div>
<div class="item__price">
£29.99
</div>
</div>
<div class="item">
<div class="item__heading">
Item 6
</div>
<div class="item__content">
Some content that is not that long
</div>
<div class="item__price">
£99.99
</div>
</div>
</div>
How do I align the div so that both label has the same width and right aligned and both content start at the same place. Some suggest float, but I dont perfer floating the content. Is there a flex way of doing this.
<!DOCTYPE HTMML>
<html>
<body>
<div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
Long label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
</div>
</body>
</html>
With flexbox...NO...you can't unless you use fixed width values (whatever they are)...there is no width/height equalisation between non-siblings.
You would need to given one of the elements a fixed width value and then let the other take up the remaining space with flex:1.
.blue {
background: lightblue;
/* width: 150px; */
flex: 0 0 150px
}
.green {
background: #bada55;
flex: 1;
}
.parent {
display: flex;
}
<div class="parent">
<div class="blue">
Long label:
</div>
<div class="green">
This is the content
</div>
</div>
<div class="parent">
<div class="blue">
label:
</div>
<div class="green">
This is the content
</div>
</div>
Why not simply add a class to the content and label divs?
HTML
<div>
<div>
<div class="label-div">Long label</div>
<div class="content-div">Content</div>
</div>
<div>
<div class="label-div">Label</div>
<div class="content-div">Content</div>
</div>
</div>
CSS
.label-div {
width: 70px;
text-align: right;
}
.content-div {
text-align: left;
}
This way, you can be sure that all label divs are equal in length.
I have created an html stuff using bootstrap 2.3.2 css. The html will be having four rows with different height such as for the first row it will 10%, second row - 20%, third row - 40% and the fourth row - 40% respetively. In third row I have placed a box like panel within each cell, The html is rendering but the problem is the height of the panel is not matching with the parent. Lets say if the content of the panel body exceeds then the panel comes out of the parent like as shown below
Now If the content of the panel body is less then the panel height seems not matching with the parent like as shown below
What I am trying to achieve is that the panel should fill within the parent div no matter whats the body content. when the body content of the panel exceeds the height of the parent div then a vertical scrollbar should come for the panel body.
My code is as given below
JSFiddle
html
<div id="content">
<div class="row1">
<div class="row-fluid">
<div class="span6">content1</div>
<div class="span6">content1</div>
</div>
</div>
<div class="row2">
<div class="row-fluid">
<div class="span6">content2</div>
<div class="span6">content2</div>
</div>
</div>
<div class="row3">
<div class="row-fluid">
<div class="span4">
<div class="panel">
<div class="panel-header well" data-original-title="">
<h5><i class="icon-th"></i> Grid 3</h5>
</div>
<div class="panel-content">
fgdfg dad dsd dsadsad ds adsa d das ds dsa dsad sa d ad as dsad sa d sda dsa sa das dsa da asd sad
</div>
</div>
</div>
<div class="span4">
<div class="panel">
<div class="panel-header well" data-original-title="">
<h5><i class="icon-th"></i> Grid 3</h5>
</div>
<div class="panel-content">
fgdfg
</div>
</div>
</div>
<div class="span4">content3</div>
</div>
</div>
<div class="row4">
<div class="row-fluid">
<div class="span3">content4</div>
<div class="span3">content4</div>
<div class="span3">content4</div>
<div class="span3">content4</div>
</div>
</div>
</div>
Try flexbox.
Adjustments to CSS:
.row3 {
height: 40%;
background: orange;
display: flex;
}
.row3 > .row-fluid {
display: flex;
}
.row-fluid > .span4 {
display: flex;
}
.panel {
display: flex;
flex-direction: column;
}
.panel-header {
/* padding-bottom: 10px; */
/* min-height: 12px; */
}
.panel-content {
overflow-y: auto;
}
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
Add this class in your css.Hope this will be work.
.panel-content {
border: 1px solid red;
padding: 2px;
background: white;
height: 40px;
overflow-y: scroll;
}
Updated : Jsfiddle
There are two ways you an go about this.
Using JavaScript, you can set the height of the children elements to that of the parent, or to the height of another child element, see my JSFiddle example. You can click on the child-2 element and it will take the height of child-1, I added the click just so you could see it taking the other elements height, it will set the height to the same as child-1
In JavaScript
var child1Height = $('.child-1').height();
$('.child-2').height(child1Height);
Alternatively you can use CSS, specify the height of the parent, and insure that the children elements have a height of 100%, child-2 element has a height of 100%, which will take the height of it's parent div that is set to 500px, see my JSFiddle example.
In CSS
.parent{
width:400px;
height: 500px;
}
.child-2{
height:100%;
overflow-y: auto;
}