I have this layout:
http://jsfiddle.net/spadez/BN9KJ/2/
It works by having an optional left column. How can I get the column colour extend all the way down the page even if there isn't enough content to fill it.
I was thinking it would be something like this:
height: auto;
But that doesn't seem to work
add the following css
html,body{
height:100%;
}
and then apply height: 100% for the divs
working fiddle
The Logic: setting the height of the body,html element,because it is the parent element..!!
BUT why should we give both html and body --> height:100% ??
the answer is https://stackoverflow.com/a/6654996/2967572
Body looks to its parent (HTML) for how to scale the dynamic property,
so the HTML element needs to have it's height set as well.
just give
#left_column {
width: 250px;
background-color: orange;
float: left;
height:100%; //added
}
along with
html,body{
height:100%;
}
DEMO
BUT
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
it will be good alternative to give min-height
#left_column {
width: 250px;
background-color: orange;
float: left;
min-height:100%; //added
}
DEMO with Min-height
Related
I have col-sm-1 and col-sm-9 and col-sm-3. I want them to have a full height. When I do height:100%, the height goes full only when I have contents inside them. I want the height to be full even when it's just empty.
So I just did height:2000px; background-color:grey; and now this looks like the way I want. However even a beginner like me know this isn't the best way to do it.
Am I allowed to go height:2000px; and deal with it?
Just use the Flexbox.
Assign their parent a class .flexbox, set the CSS as below.
.flexbox .col {
flex: 1;
}
The height 100% fills the space even if the content isn't there but it may be not working just due to parent container height is not set. So, for this you need to define the parent element height in fixed pixel or set 100% height parent-hierarchy way. In short you can fix this problem by just setting the height 100% to the html,body:
html,body{
height: 100%;
}
.your_element{
height: 100%;
}
And here is a demo:
html,body{
height: 100%;
}
div{
height: 100%;
background-color: red;
}
<div>some content</div>
What I am trying to do:
Set the <body> tag as display:table and my header/content/footer as display:table-rows. I also want <body> to be the size of the screen, the child elements will show scrollbar if needed.
I do this by setting
body{
display:table;
height:100%
}
This works in chrome, but in firefox the height of the body is the height of the screen. Is this as expected or is this a firefox issue? Is there a way to achieve this while using table? It used to work without table, but I need the footer to not appear on occasion, so I need my content to grow as needed, and it seems to work nicely in chrome.
You can see this on my (alpha) site at sportmenow.com
I've provided two solutions below, the first is more structured, the second follows your design pattern.
Demo Fiddle
Why not implement more structured HTML which follows a more semantically correct pattern and structure of table->row->cell:
<header>
<section></section>
</header>
<article>
<section></section>
</article>
<footer>
<section></section>
</footer>
CSS:
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:table;
}
header, footer, article {
display:table-row;
width:100%;
height:100%;
}
header, footer {
height:50px;
background:black;
}
section {
display:table-cell;
width:100%;
}
section:nth-child(2) {
height:100%;
}
However.. If you dont care about this so much, you can simply use display:table on your body element and then the below- the limitation being that each section will collapse unless it has content (even only nbsp;)
Demo Fiddle
HTML
<header>headerContent</header>
<article>mainContent</article>
<footer>footerContent</footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:table;
}
header, footer, article {
display:table-row;
width:100%;
height:100%;
}
header, footer {
height:50px;
background:black;
}
You can specify the height of a display:table element in firefox. However, to use the full browser window, you may have to specify the height of the html element too:
html { height:100%; }
fiddle
Following this bug report, https://bugzilla.mozilla.org/show_bug.cgi?id=26617#c14, it seems when the element is using display: table-row, Firefox treat height as min-height, that's why you only found problem in Firefox.
On the other hand, if you already know the height of your header / footer before hand, you could use position: fixed with fix value in top and bottom attribute to layout your page instead.
In short, please try replace your CSS on your .body and .footer like this.
.body {
display: block;
position: fixed;
width: 100%;
top: 60px;
bottom: 92px;
padding: 6px;
}
.footer {
display: block;
position: fixed;
height: 70px;
width: 100%;
bottom: 0;
text-align: center;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
This will work consistently on both Firefox and Chrome.
However, when you hide your footer, you will need to use javascript to update CSS attribute "bottom" to 0 on your .body element.
$('.body').css({'bottom':'0'});
To set any element to 100% of its parent's height, the parent element must have a defined, non-percentage height (px, em, etc.), or it an all ancestor elements must be 100% height. For example, if your element was the first child of the body, you could set it to 100% height with the following CSS:
html, body, #my_element {
height: 100%;
}
If you were to set a parent to a specific height, then the target element to 100%, the target element would be that height as well. Imagine you had an element with an ID of element_parent, that contained your target element:
#element_parent {
height: 500px;
}
#my_element {
height: 100%;
}
In the above example would mean that my_element would expand to the full 500px that its parent is set to.
I've been told to use position: relative but when I go to view it in the browser it doesn't show up, please could you tell me why?
Here is my code:
HTML:
<div id="box"></div>
CSS:
#box
{
position: relative;
height: 20%;
width: 20%;
background: #366;
}
Just add html, body {height:100%} to your CSS-File.
http://jsfiddle.net/LGJH4/
The problem is with the CSS calculation. By default HTML page has no height.
So, your 20% for the height is just 0 as it is relative to HTML which has 0 height.
The option for you is either propose pixel height for #div or give a height to the whole document.
#box {
height:100px;
}
or
html,body {
height: 100%;
}
/*** Write your css here ***/
Here is a fiddle, http://jsfiddle.net/Pj6Ra/1/
Generally, without a parent element with a defined height, a % height will result in 0px. You'll need to use a different height unit, such as px or em. E.g.
#box {
height:200px;
}
Interestingly, you could use padding-bottom: 20%, although that wouldn't give you the result you expect. The height is then 20% of the width of the viewport, rather than of the height.
Try this code:
DEMO
html,body
{
height:100%;
}
I have an image. This image should have 100% height. So, in my CSS, I defined height: 100%. The problem is the respective width, since this image is a panorama, it will certainly exceed the viewport dimensions. I don't want this to happen. Is there a way like overflow: hidden to completely hide the portion of the image after the maximum viewport width.
HTML
<div id="image">
<img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/>
</div>
CSS
#image {
height: 100%;
}
Here's the fiddle as well.
http://jsfiddle.net/AH3Hd/
Add this CSS to your div. You need to give it a width or it will just auto adjust to whatever its contents are.
div {
width:100%;
overflow:hidden;
}
http://jsfiddle.net/AH3Hd/4/
To use overflow:hidden;, you need to specify a width to the div, otherwise the browser will not know when to hide. I edited your fiddle to show that:
#image {
height: 100%;
width: 100%;
overflow: hidden;
}
http://jsfiddle.net/AH3Hd/6/
You could do something like this:
#image {
overflow: hidden;
height:300px; // Depends on the size you want
width:300px;
}
#image img{
height:100%;
}
Here's the fiddle: http://jsfiddle.net/jwvanveelen/AH3Hd/7/
Ok, i've tried LOTS of solutions offered in StackOverflow about this issue, but none of them have worked. I guess this is a tricky thing and needs a tricky solution.
From what I've seen, each problem is different with this 'occupying' the body thing, so I guess I'm here with a different one.
I really need help here, guys.
Here's my problem: http://jsfiddle.net/Ff49Z/5/
And heres what I want: When the "wrapper" div does not fulfill the body, I want the div to expand to the bottom of it anyway. So, in the fiddle, what I'm trying to achieve is not a gray spot on my layout. As you can see, wrappers are 100% height (that is one common solution offered in SO for this problem) and that does not help.
It is this div that does not expand to fit the wrapper:
div#middle {
padding:10px;
margin:0 auto;
height: 100%;
}
BTW, when overscrolling, footer sticks and wrapper scrolls. That is the desired behaviour, and it works flawlessly.
I simply added:
div#middlewrap {
width:100%;
position:absolute;
margin-top:60px;
}
and works as you asked. EDIT: THIS IS WRONG - correct answer below
I was about to give up when I decided to rewrite the css from scratch, and it came out simpler than I expected. I simplified your CSS to the bones and added some cool overflow-y:auto; to the middle wrapper plus some sweet position:fixed; to the header and the footer. Then I adjusted the padding to the #middle content div and added a height:100%; to the body and html(so that every child of body can be successfully set to height:100%;) and that's what came out:
body, html {
margin:0;
height:100%;
}
div#headerwrap, div#footerwrap {
position: fixed;
left: 0;
right: 0;
}
div#headerwrap {
top: 0;
height:64px;
background-color: red;
}
div#middlewrap {
height:100%;
overflow-y:auto;
background-color: blue;
}
div#middle {
padding-top:70px;
padding-bottom:35px;
}
div#footerwrap {
bottom: 0;
height:32px;
background-color: green;
}
That's all the CSS you need. Pretty cool uh?
HERE IS THE FIDDLE
Note: I respected your syntax, which is also correct, but it's not necessary to write DIV before every #ID in your css. Deleting those selectors will dramatically decrease your css file weight in bigger projects.
Cheers.
Make all parent elements as height:100%:
body, html, body>div#middlewrap {
height: 100%;
}
div#middle {
min-height:100%;
}
Impossible solely with CSS. Need javascript involved. Take the client height - (header + footer) = min height for the content
Using % height doesn't work because the parent doesn't have a height defined.