I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?
Related
I want to use three <div> areas on my web page: Header, Content and Footer.
The Footer <div> is supposed to stick to the bottom of the web page.
The Header <div> is supposed to stick to the top of the page.
The Content <div> is supposed to fill the whole area in the middle of the page.
So this is the basic layout:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
For the Footer to stay down the page I added
#footer
{
position: fixed;
bottom: 0;
}
For the Content <div> I'm using a background image, scaling exactly to the div element's dimensions:
#content
{
background: url("Bilder/Bild.png") center contain no-repeat black;
}
Now I want the Content <div> to be exactly the remaining height of the ViewPort between Header and Footer without adding any JavaScript, no matter what content is later added to the Content <div>.
How can I do that in CSS3?
If the size of footer and header is known, you can use calc(). So assuming both take 100px together, this should work:
html, body { height: 100%; }
#content {
height: calc( 100% - 100px );
}
Be aware, though, that old browsers do not support this. Also have a look at the compatibility table for the prefixes that might be needed.
Example Fiddle
you could use something like this. it will allow you to keep your positions in a range of resolutions.
#header {
position: fixed;
height: 10%;
}
#content {
position: fixed;
height: 80%;
top: 10%;
}
#footer {
position: fixed;
bottom: 0px;
height: 10%;
}
check it out here
I know it looks like a question that has been asked many times, but I just couldn't find the solution to that very specific situation.
Here's the basic wireframe of my layout :
Basically, I've got a few divs with different backgrounds that take 100% width and 100% height of the browser window. Within each and every of them is another div that takes 50% width of its parent but has a variable height, depending on its content.
I'd like all of these divs-within-a-div to be vertically align.
Now, I've read that putting a display:table-cell and a vertical-align:middle on the parent should work, but in this case it just seems to mess things up. :-/
My code:
<head>
<style>
html, body {
height: 100%;
}
body > div {
width: 100%;
height: 100%;
background-size: cover;
}
.centered {
width: 50%;
margin: 0 auto;
background: rgba(0,0,0,0.4);
padding: 50px 0 30px 0;
}
</style>
</head>
<body>
<div id="pic_1">
<div class="centered">content</div>
</div>
<div id="pic_2">
<div class="centered">content</div>
</div>
<div id="pic_3">
<div class="centered">content</div>
</div>
</body>
Thanks for your help!
Set a grandparent element to be display:table; height:100% and the parent element to be display:table-cell; vertical-align:middle.
See "Method 1" here for an example.
Also, note that your markup should not use class="centered"; use a semantic class name instead.
I have divs like this:
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
now I use this style for my container and footer:
html, body {
height:100%;
}
div.container {
min-height: 100%;
position: relative;
}
div.footer {
width:100%;
height: 40px;
positioin: absolute;
bottom: 0px;
}
So, the footer stays at the bottom relative to the page, it is good, but I found out two problems:
if the body div's content is too long, it will overlap the footer!
I want the background color of the footer to span over the whole browser view port, but currently it is just as wide as its the container div.
Any idea of how to fix this?
My best tip is to use A CSS Sticky Footer, works like a charm.
place the footer div out of the container and give marin-top:-(height:px)px;.
<div class="footer"></div>
html, body {
height:100%;
}
div.container {
min-height: 100%;
}
div.footer {
width:100%;
height: 40px;
margin-top:-40px;
}
You might want to try bottom: -40px;.
The bottom property positions your element so that the bottom of your element is offset by the bottom of the containing element by this amount. So if you had bottom: 0; as in your example, the bottom of your element is aligned with the bottom of its containing element, hence it will overlap it.
I want the background color of the footer to span over the whole browser view port, but currently it is just as wide as its the container div.
This is because the width: 100%; is defined relative to the containing block of the element, which is the div.container (which is set to position: relative). You would have to take it out of this container, or not define the container as position: relative; to fix this.
I've set up my problem here.
I have 2 divs, each outlined with a black border. One is my content div (containing text), with height set to 600px; The other div, containing a banner image, I'd like to use as my page's footer. I am able to do this in absolute positioning by simply marking the div with "bottom: 25px." However, what I'm hoping to do is to make the footer div "stop" when it collides with the content div as you shrink the size of your browser window.
Any ideas? Thanks much in advance!
Here's how I do it. Got the technique from http://ryanfait.com/sticky-footer/. He adds an extra "push" div but I used the wrapper's padding bottom to serve the same function (no need for empty DIVs).
Here's an example (you can view it at http://ve.savantcoding.com/example.html)
<html>
<head>
<title>sample footer</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* bottom margin is negative footer height */
}
#content {
padding-bottom: 200px /* bottom padding is footer height */
}
#footer {
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.