CSS container div not getting height
Add the following property:
.c{
...
overflow: hidden;
}
This will force the container to respect the height of all elements within it, regardless of floating elements.
http://jsfiddle.net/gtdfY/3/
UPDATE
Recently, I was working on a project that required this trick, but needed to allow overflow to show, so instead, you can use a pseudo-element to clear your floats, effectively achieving the same effect while allowing overflow on all elements.
.c:after{
clear: both;
content: "";
display: block;
}
http://jsfiddle.net/gtdfY/368/
container div not stretching to full height of parent
The reason is that your html
and body
tag are not strechted to be full height. You should style them like this:
html, body {
height: 100vh;
}
Here is a working codepen
You can't use min-height
as it won't work with .container-fluid {height:100%}
.
Note: Don't use background color for finding html elements! Instead use inspect element and hover your mouse over html elements.
Why is my div not taking up 100% height of its parent container?
That is because you have align-items: center
for the flexbox in which case it will default to the content height.
What you need to do is to remove that (let align-items: stretch
come into play as it is the default) and also remove the height:100%
from CASideBorder
.
See demo below:
.CAContainer { display: flex; flex-flow: row nowrap; justify-content: flex-start; margin: 0; padding: 0;}
.CASideBorder { background: #000; width: 8px;}
.CAMiddleContainer { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;}
.CATopBorder { height: 8px; background: #000; width: 100%;}
.CAMiddleTextContainer { padding: 40px 80px 40px 80px; font-size: 4em; color: #000;}
.CABottomBorderContainer { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; height: 8px;}
.CABottomBorderLeft, .CABottomBorderRight { flex: 1; height: 100%; background: #000;}
<div class="CAContainer"> <div class="CASideBorder" id="CALeftBorder"></div> <div class="CAMiddleContainer"> <div class="CATopBorder"></div> <div class="CAMiddleTextContainer"> text </div> <div class="CABottomBorderContainer"> <div class="CABottomBorderLeft"></div> <div class="CABottomBorderRight"></div> </div> </div> <div class="CASideBorder" id="CARightBorder"></div></div>
Div has no height even if it has content
See the Demo here . Just add overflow: auto;
to your main container.
#gallery {
border: 1px solid;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
height: auto;
margin-top: 20px;
padding: 15px;
overflow: auto;
}
Why doesn't height: 100% work to expand divs to the screen height?
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>
, which can be a percentage height. .
So, you've given all of your elements height, except for the <html>
, so what you should do is add this:
html {
height: 100%;
}
And your code should work fine.
* { padding: 0; margin: 0; }html, body, #fullheight { min-height: 100% !important; height: 100%;}#fullheight { width: 250px; background: blue;}
<div id=fullheight> Lorem Ipsum </div>
Divs not showing specified height or width
First, yes there's a typo, but that's not gonna solve the whole issue for you (although you haven't asked about the rest yet so this might just be unnecessary and if so, feel free to ignore).
HTML needs to be changed if you want to use inline-block
for the .feature
blocks. See why this is a problem here. If you're ok with using float:left;
for them all instead then you don't have to do this.
Depending on whether you choose to use box-sizing
for all the elements you have (like with a Normalize.css solution or just doing what I do in my fiddle), you'll need to possibly change the width and height to account for the border only on the container. See how, why and pros/cons here on box-sizing: border-box;
.
Your CSS isn't terrible so the changes I made were mainly aesthetic but the main thing you gotta decide is display: inline-block;
or float: left;
inside of .feature { }
.
FYI - using float: left;
implies display: block;
, not to mention <div>
using it by default.
Using display: inline-block;
New HTML:
<div class="container"><div class="feature a">
</div><div class="feature b">
</div><div class="feature c">
</div><div class="feature d">
</div>
</div>
New CSS
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.container {
width: 710px;
height: 710px;
border: 5px solid black;
margin: 0px;
padding: 0px;
}
.feature {
width: 350px;
height: 350px;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
.a {
background-color: yellow;
border-bottom: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.b {
background-color: red;
border-bottom: 2px solid steelblue;
border-left: 2px solid steelblue;
}
.c {
background-color: blue;
border-top: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.d {
background-color: purple;
border-top: 2px solid steelblue;
border-left: 2px solid steelblue;
}
Live Demo
Using float: left;
New HTML:
<div class="container">
<div class="feature a"></div>
<div class="feature b"></div>
<div class="feature c"></div>
<div class="feature d"></div>
</div>
New CSS:
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.container {
width: 710px;
height: 710px;
border: 5px solid black;
margin: 0px;
padding: 0px;
}
.feature {
width: 350px;
height: 350px;
padding: 0;
margin: 0;
float: left;
text-align: center;
}
.a {
background-color: yellow;
border-bottom: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.b {
background-color: red;
border-bottom: 2px solid steelblue;
border-left: 2px solid steelblue;
}
.c {
background-color: blue;
border-top: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.d {
background-color: purple;
border-top: 2px solid steelblue;
border-left: 2px solid steelblue;
}
Live Demo
PS - your widths and heights are changed here for continuity but you can use whatever sizes you want that fit.
Div not getting correct height with img content
It's because of the parent's line-height
. Either set the line-height
(or font-size
) of the parent to zero, or set the image to display: block
.
Inner Div not getting parent div height
The divs won't naturally occupy the full vertical space available to them. See this jsfiddle for an example. The outer div is given an explicit height of 100 pixels, and the inner div has no height specified at all. The inner div thus only take up the space needed to display its contents.
HTML:
<div class="outer">
<div class="inner">
<p>Content here!</p>
</div>
</div>
CSS:
.outer {
background: red;
height: 100px;
}
.inner {
background: green;
}
If you want the inner div to take up all the vertical space available, set height:100%
in the CSS. See this jsfiddle for an example.
New CSS:
.outer {
background: red;
height: 100px;
}
.inner {
background: green;
height: 100%; /* new line */
}
I'm not sure if there are any more specifics to your problem as you are using a clearfix
CSS class that isn't shown in your example. Please let me know if there's something else missing for you to solve your problem.
Related Topics
CSS Get Height of Screen Resolution
Why Doesn't Inset Box-Shadow Work Over Images
Changing Chunk Background Color in Rmarkdown
What Disadvantages Are There to the <Button> Tag
How to Add Animated Gradient to an Svg Path
Text-Overflow Ellipsis on Flex Child Not Working
Binding in Control with "Class" Attribute
The Use of /Deep/ and >>> in Angular 2
How to Force Re-Render After a Webkit 3D Transform in Safari
Fonts Looks Different in Firefox and Chrome
Does IE9 Support CSS Linear Gradients
What's the Difference Between HTML[Lang="En"] and HTML:Lang(En) in CSS
CSS Equivalent of the "If" Statement
Why Can't Child Elements Override the Opacity of Parent with a Greater Value
Starting Shiny App After Password Input (With Shinydashboard)