I have a div inside a parent div. The parent div has display set to table-cell and does not have a fixed size.
I need the child div to stretch throughout the parent div, but I need the parent div to retain its size and not stretch itself.
This is my code (with inline CSS for simplicity):
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell; width: 600px;">Content</div>
<div id="parent" style="display:table-cell;">
<div id="child"></div> <!-- I need to stretch this across the entire parent -->
</div>
</div>
This is basically what I'm trying to achieve:
In other words: three divs in a line, the middle having a fixed size, the other ones stretching to the ends of the browser window. I need to be able to add content to the right div while making sure the right div doesn't resize as I add content into it.
Flexbox can do that.
.parent {
display: flex;
height: 200px;
}
.child {
flex: 1;
background: lightgrey;
}
.child.fixed {
flex: 0 0 600px;
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child fixed"></div>
<div class="child"></div>
</div>
Or if you must use CSS Tables - Codepen Demo
.parent {
display: table;
height: 200px;
width: 100%;
table-layout: fixed;
}
.child {
display: table-cell;
background: lightgrey;
}
.child.fixed {
width: 600px;
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child fixed"></div>
<div class="child"></div>
</div>
HTML:
<div class="browser-window">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS:
.browser-window {
width: 100%;
height: 100px;
background-color: black;
display: table;
}
.left, .middle, .right {
display: table-cell;
height: 100%;
}
.middle {
width: 60px;
background-color: green;
}
https://jsfiddle.net/6gzegpzx/
Related
I'm trying to achieve the following:
I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the position: absolute), otherwise I can't see the green rectangle.
My HTML structure is the following:
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
In the .interface CSS I have the following:
.interface
{
position: absolute;
top: 15%;
}
With this CSS I'm unable to see the green rectangle. If I remove the position: absolute (and therefore the top: 15% stops applying) I'm able to see the green rectangle.
You can see the issue in this JSFiddle: https://jsfiddle.net/v9euwdz3/
So, how do I manage to have the DIV showing at a certain level (margin from top) and without compromise my HTML structure?
Here is what you're trying to achieve using flex:
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.navetc {
background-color: white;
height: 15vh;
}
.top {
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="navetc">
SPACE
</div>
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
You could also use margin-top: 15%; instead of a placeholder div
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.top {
margin-top: 15vh;
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
(I used vh instead of % to get it to show up correctly in this code snippet)
as we know the content that have height which is 100% means is 100% of its parent and while the height of the parent is not defined will cause an error that's what you was stuck with you set the with of body to 100% but was not right you would set it to 100vh to fit the screen if you are on computer and the other mistakes that I found was in your calculation where you used to subtract the measurement which is in parcentages from the one in pixels height: calc(100% - 150px); and the others where simple mistakes
html,
body {
height: 100vh;
}
.app {
position: relative;
height: 100%;
display: flex;
}
.interface {
position: absolute;
height: 100%;
top: 15%;
}
.view {
position: fixed;
height: 100%;
background-color: #ccc;
width: 350px;
}
.body {
position: relative;
height: 100%;
}
.body .top {
height: 15%;
border: 1px solid #000;
}
.body .middle {
height: 60%;
border: 1px solid red;
}
.body .bottom {
height: 20%;
border: 1px solid green;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
to see the result in the snippet you should observe it in full page and also when you see the result through jsfiddle there at the result section there is bar downward which hide some part of footer
I have the following html markup:
<div class="container">
<div> <------Want this to bee 100% height
<div class="child">
</div>
<div class="child">
</div>
<div> < --------- 100% height
</div>
</div>
</div>
I want the two classless divs to have a height of 100%
.container {
height: 100%;
> div {
height: 100%;
},
> div > div {
height: 100%;
}
}
This works, but how do I accomplish this in a single rule?
Yes, you can use the :not pseudo selector to exclude any element with a class.
.container {
height: 100%;
div:not([class]) {
height: 100%;
}
}
This will essentially select any div that does not have a class attribute set.
Here's an example with the SASS above compiled to CSS.
.container {
height: 100%;
}
.container div:not([class]) {
height: 100%;
background: blue;
}
.container div.child {
background: red;
}
<div class="container">
<div>
jkfhakfhkadshfksdhfasdk
<div class="child">
child
</div>
<div class="child">
dhild
</div>
<div>
djalfjasdl;fjasl;fjas;lfj
</div>
</div>
</div>
EDIT: If you only want to go two levels deep (meaning classes divs won't be affected within the second level div), you can do this:
.container {
height: 100%;
> div:not([class]) {
height: 100%;
> div:not([class]) {
height: 100%;
}
}
}
Here it is in action with the second level selector:
.container {
height: 100%;
}
.container .child {
background: blue;
}
.container>div:not([class]) {
height: 100%;
background: red;
}
.container>div:not([class])>div:not([class]) {
height: 100%;
background: red;
}
<div class="container">
<div>
top level no class
<div class="child">
first child with class
</div>
<div class="child">
first child with class
</div>
<div>
second child no class
<div class="child">
third child with class
<div>
fourth child no class no affected by red bg
</div>
</div>
</div>
</div>
</div>
Here's a fiddle
https://jsfiddle.net/dcmh5sga/
If you need it to be a singe rule, you can do this:
.container, .container > div, .container > div > div {
height: 100%;
}
You could also apply the rule to all child divs, if that works for your case:
.container, .container div {
height: 100%;
}
I've got the following setup
<div class="a">
<div class="b">
Some content
</div>
</div>
And for CSS
.a{
flex-grow: 1;
overflow: auto;
}
.b{
height: 100%;
}
I’m trying to make the inner div be 100% the height of the parent whose height is determined using flex-grow, but my current code doesn’t seem to work. Is it possible to achieve given that the parent's size is determined using Flexbox?
Make the a a flex conainer and the b will by default stretch to fill 100% of the height:
.container {
display: flex;
flex-direction: column;
height: 200px;
border: 1px solid red;
}
.a {
flex-grow: 1;
display: flex;
border: 1px solid green;
}
.b {
border: 1px solid;
}
<div class="container">
<div class="a">
<div class="b">
Some content
</div>
</div>
</div>
You can write this code
<div class="a">
<div class="b">
Some content
</div>
<div class="b">
Some content
</div>
<div class="b">
Some content
</div>
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I have a container that is dynamically generated on the fly. It will end up with either a single div inside it, or two divs inside it.
The first div may or may not be there, but the second div is always there. I need that second div to always fill up the entire width.
It fills the width when the first div is there, but when it isn't there it doesn't go all the way.
Here is the current CSS I am using:
.div1 {
display: table-cell;
}
.div2 {
display: table-cell;
width: 100%;
vertical-align: top;
}
NOTE: Both of these divs have form fields and labels.
Add a parent element that has display:table style:
.table{
display:table;
width: 100%;
height: 200px;
}
.div1 {
display: table-cell;
background-color: red;
}
.div2 {
display: table-cell;
width: 100%;
vertical-align: top;
background-color: blue;
}
<h2>div1 has content</h2>
<div class="table">
<div class="div1">some content</div>
<div class="div2"></div>
</div>
<br/>
<h2>div1 has no content</h2>
<div class="table">
<div class="div1"></div>
<div class="div2"></div>
</div>
<br/>
<h2>no div1</h2>
<div class="table">
<div class="div2"></div>
</div>
JSFiddle