I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer
Related
I've been banging my head against the wall really hard for the past couple of hours to figure out a way to achieve the layout I'd like for a webapp. And my head hurts.
Basically what I need is to have a full window layout (full width, full height, no scrolling - ever). 100% of width and height should be covered using two different horizontal boxes (you can see them as rows).
The height of the first box/row can be variable (see it as a header for the page)
The one below should occupy what's left of the space, without ever going further than 100% of the window, hence without ever showing a scrollbar.
Now what's a bit more tricky is that within the second box/row, I want content to be displayed with an inner vertical scrolling. Imagine the second box/row contains a list of items, in case of very few items, the bottom part of the box/row should stop right after the content. In case of many items, the box/row should expand right until it hits 100% of the window height (which is basically 100% of the windows - the height occupied by the first box/row). The rest of the content should be visible through scrolling within the second box/row.
Am I making any sense?
Regarding the code, I'm not going to copy/paste the desastrous thing I've pulled together because I'd rather start from a blank page.
This is what I tried:
<html>
<body>
<div id="wrapper">
<div class="box">Header</div>
<div class="box">Content <ul><li>...</li>(x1000)</ul></div>
</div>
</body>
</html>
The reason why I use a "box" class is because both boxes/rows should show the same appearence in terms of backgrounds, margins, shadows, etc.
html, body {
height: 100%;
}
#wrapper {
position: absolute;
height: 100%;
width: 100%;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
For the rest, I've just tried (and failed so far) to manipulate the .box elements by adding hazardously overflow: hidden; overflow-y: scroll; height: 100%; max-height: 100%; min-height: 100%; etc.
Thanks in advance for your help!
The problem is because CSS has long been crappy about auto-adjusting height to available space.
The solution is to use a wrapper that's set to position: absolute and tied to the top, left, right, and bottom edges of the viewport. With this, the browser will auto adjust the height of the element, and if you have a content div inside with height: 100% it'll always fill that space.
Setting overflow-y: scroll on the wrapper will allow the content to scroll if it becomes too long:
http://codepen.io/helion3/pen/jwbcx
Site headers are usually not variable in height. If you're defining the site header using percentages, and if you don't need to support IE<8 then you can use percentages safely with box-sizing: border-box to achieve the same.
I believe this should do the trick.
If you adjust the height of .header make it is equal to the top: position of .content
CSS:
html, body {
margin: 0;
}
.header {
height: 150px;
background: #0080ff; // (Unnecessary, this is set to help you see the header div)
}
.content {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background: #ff8000; // (Unnecessary, this is set to help you see the content div)
}
HTML:
<body>
<div id="wrapper">
<div class="box header">Header</div>
<div class="box content">Content</div>
</div>
</body>
Maybe you want something like this? I replaced class="box" with ids, but it should work.
Consider following things:
No need to have the "absolute" positioned div (#wrapper in your example)
Create 2 box div same like you have created in your example (.box)
Second box should have "overflow:auto" style property
Calculate the height of header and full display area's height with javascript
Calculate the remaining height and assign this value as height, min-height and max-height for the second box. That's it.
You can check the solution here:
http://webnflash.com/temp/occupyAvailableHeight.htm
I'm working on a website that fits perfectly in the browser window. Below is a basic blueprint of the website layout:
So far, the Red area is just display:block. The Green area is also display:block with margin-right:200px. The Blue areas(nested in a div) is float:right.
So I've got the width sorted. It's the height I need advice on. The Red and Dark Blue areas are a set height, but I need the Green and Light Blue areas to fit the height of the browser window view.
I'm trying to use box-sizing, but it exceeds the height of the window view because it's extending to the max height of the window. Sorry for my poor explanation. Any advice if would be excellent. Thank you!
For green div set height: calc(100%-{red-div-height}); and for the light blue div set height: calc(100%-{dark-blue-div-height}-{red-div-height});
This is kinda the legacy version of C-Link's answer.
jsFiddle and fullscreen
This has the limitation of any content falling below one page-full falling outside of its container (you can see if you scroll down in the fiddle, but not on the fullscreen).
Make sure our page stretches to its full height.
body, html { height: 100%; width: 100%; margin: 0; padding: 0;}
Set a static-height header.
header {
height: 101px;
background: red;
}
Create a box for everything under the header. You were on the right track with the box-sizing. We can add padding to it, in the same amount as our header. Then percentages inside it work nicely.
.content {
position: absolute;
box-sizing: border-box;
padding-top: 111px;
padding-bottom: 10px;
top: 0; left: 0;
height: 100%; width: 100%;
}
We float our aside (may or may not be the correct element, depending on contents) and set some styles on it.
aside {
float: right;
width: 20%;
height: 100%;
padding-bottom: 111px;
box-sizing: border-box;
}
.top {
height: 100px;
background: blue;
}
.bottom {
margin-top: 10px;
height: 100%;
background: skyblue;
}
This is our main, large, content area, which we float to the left. The width could be specified exactly if we wanted exact padding at the cost of additional HTML.
[role="main"] {
width: 78%;
background: limegreen;
height: 100%;
float: left;
box-sizing: border-box;
}
You can also set overflow-y: auto on our main or aside elements, to have them scroll when they run out of space. There should also be mobile styles for this page that remove the floating, absolute positioning, absolute styling, and widths should be nearly 100%.
you can always set the green box height to the window height minus the red box height.
accordingly the light box height to the window height minus the (red box height + the dark blue box height)
Edit 1: I haven't mentioned that has to be done with javascript.
Edit 2: Consider any paddings and margins too.
Could you not just give the divs a max or min height depending on their purpose?
I use a main container or wrapper div that the others would be contained in, that div is then my effective page or screen area.
<div id="wrapper">
<div id="content">
<div id="sidebar">
</div>
</div>
</div>
#wrapper{
min-height: Whatever value you want here;
max-height: Whatever value you want here;
}
It might be a good idea to set up your page using main container divs, hot only for the content but for the header and footer as well.
As an example, I have a main wrapper that is the whole page, within that is the header div, the content div, the nav div and the footer div. These are the main ones. Everything else can then be contained within them.
So, you can set the layout out using percentages so you have a fluid design that'll react to each browser size. The other elements will then 'fit' inside the main divs and be constrained to them. You may need to look into positioning etc but this is certainly the direction you should head towards.
<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>
Then use the css to re deisgn the above layout focusing only on those main divs. Use % instead of px to maintain fluidity.
#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
A pretty common trick is to give the green (and light blue) box absolute positioning, a padding AND a negative margin. Because 100% width is relative to the containing box (could be a parent div, or just the window itself) this is not suitable. When the header was a relative height, say 10%, it would've been easy. The padding makes sure the content will not disappear behind the header, the negative margin puts the box back in place. Don't forget the z-index (otherwise the content (green part) will overlap the header).
The css looks like this:
.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }
The fiddle looks like this: http://jsfiddle.net/2L7VU/
<div id="main" style="overflow:hidden;height:80%;>
<div id="header">
</div>
<div id="content" style="overflow:hidden;">
</div>
</div>
I have two divs in the main div, and I want the content div to fill up the remainder of the main div, but if stuff fills up the content div past its filled up height, I don't want the content div to grow any taller.
I've seen some other stackoverflow questions like this, but none of the answers have worked for me. Tried: Make DIV fill remainder of page vertically?, Get CSS Div to fill available height, and How to make a DIV fill the remaining vertical space of the browser window?
I think the main difference is that I require the content div to fill up, but ALSO not overflow. Is this possible with only css?
Update:
I kept trying out different pieces of code and this is what I want: http://jsfiddle.net/zXnnp/. But for some reason I couldn't replicate it on my localhost. And then I found out it was because I was using http://jamesflorentino.github.io/nanoScrollerJS/ And for some reason class="nano" on the content div messed things up. Still investigating on what's wrong.
Update2:
class="nano" has height:100%; so I just overrode it with height:auto; and things are now fine. Thanks for all the help!
You could do something like this:
/* stretch the body to full height */
body, html {
height: 100%;
}
/* stretching the containers */
#header {
height: 50px; /* just a random number i chose, not sure what you wanted here */
}
#content {
height: 100%;
margin-bottom: -50px; /* same as the header height, but negative */
}
You can see the code in action here: http://jsfiddle.net/mRK24/
The magic lies in first stretching you body to viewport height. The #main will then become 80% of the viewport height. Next you give the header some fixed height, and the content you set to a height of 100%, with a negative margin bottom that is the same as the height of the header.
Note that some of your content will be lost, due to the overflow:hidden;. Strange, cause you can not know how much since you don't know the height of your user's viewport. Perhaps you should consider setting the overflow of the content to scroll, cause I can't imagine you would want part of you content to be invisible.
Have you tried using the CSS property max-height? This is from CSS 2 and should not have any compatability issues.
http://www.w3schools.com/cssref/pr_dim_max-height.asp
If you post some editable code then we could play with it and help you find some ways of making it work.
I'm not exactly sure what you're after, but maybe this will get you close:
http://jsfiddle.net/isherwood/TCVvn/1
#main {
height: 80%;
width: 80%;
position: absolute;
}
#header {
height: 50px;
position: relative;
top: 0;
}
#content {
position: absolute;
top: 70px;
right: 5px;
left: 5px;
bottom: 5px;
overflow: auto;
}
<div id="main">
<div id="header">Header</div>
<div id="content">Content</div>
</div>
Keep overflow:hidden on <div id="#main"> and let the content div take as much height as it wants with no overflow restrictions. #main will cut off #content if it gets too tall to fit inside of #main.
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}
I have a header and a content div inside a container div. I want the header's height to be fixed and the content div to occupy the rest of the container div. The easy solution is to set the height of the content div as (container-header) pixels. Is there an alternate way of doing it ?
div.container { height: 300px; width: 100%;}
div.container h2 { height: 15px }
div.container div.content { height: ?? }
I do not believe you can do this with simple CSS. However, it is trivial to implement when using a CSS preprocessor like LESS or Sass. Both less and sass have support for variables, so you can do something like this:
#total-height: 300px;
#h2-height: 15px;
div.container { height: #total-height; width: 100%;}
div.container h2 { height: #h2-height}
div.container div.content { height: #total-height - #h2 }
Note: I have not compiled / tested this code. But you get the idea.
In the first place, you don't need to set the div.container's width to 100%. You get that for free.
Second, if you have a fixed height for the container, it's simple arithmetic to subtract the header (15px) from the container (300px). Simple is good.
If your container's height is not fixed, you can try absolute or relative positioning to nail the bottom of the content div to the bottom of the parent (e.g., bottom: 0px). But you apparently have no need of that here.