The site I'm working on now has an interesting layout that I'm having trouble getting just right in CSS. The header and footer span the entire width of the browser window, with the content confined to a 960px wide block - however there's a secondary "internal" footer within this 960px content block. Both the primary footer and this "internal" footer need to be at the bottom of the page. Here's the markup of the website, stripped down to the functional units:
<html>
<body>
<header></header>
<section id="content">
MAIN CONTENT
<section id="internal-footer"></section>
</section>
<footer></footer>
</body>
</html>
The CSS is as follows:
html{margin:0;padding:0;min-height:100%;height:100%;}
body{margin:0;padding:0;min-height:100%;position:relative;}
header{width:100%;}
footer{width:100%;height:XXXpx;position:absolute;bottom:0;left:0;}
#content{width:960px;margin:0 auto;position:relative;padding-bottom:(XXX+YYY)px;}
#internal-footer{width:100%;height:YYYpx;position:absolute;bottom:0;left:0;padding-bottom:XXXpx;}
I created a JSFiddle here (adding background colors and borders, and reducing the width of the content) to demonstrate the issue I'm having.
When there is sufficient content, everything works as intended. When there is not enough content, the #content section is not stretching and the internal footer is not only lifted, but due to the bottom-padding it is too tall. Of course being too tall isn't a serious issue since I can just set no-repeat on the background image and no one is the wiser.
So how can I force the #content to stretch to the bottom of the page, without creating a scrollbar, when there is not enough content?
Changing the HTML and CSS as below is it helping achieve what you want? Now the internal footer is inside footer and also centered.
<footer>
<section id="internal-footer"></section>
</footer>
#internal-footer{width:300px;padding-bottom:50px!important;background-color:#990;height:50px;margin:-50px auto 0 auto;}
I'm copying your comment with the working fiddler so people can find easily the solution
I've resolved the second issue - of the footer content moving. First I had to remove the negative bottom margin on the inner footer (margin:-137px auto 0 auto) then I had to add a margin to the copyright p equal to the footer padding. Update your answer to incorporate the fixes and I can accept it. Here's the final, working, fiddle: jsfiddle.net/M72fn
I'm afraid that you should use javascript. Here is how I would do that with jquery:
$(document).ready(function(){
if(($(window).height()-100)>$('#content').height()){
$('#content').height($(window).height()-200);
}
});
and the fiddle here
Your content area needs to be 100% of the available height. This can be done by positioning header absolutely (as you have the footer) and then making #content 100% high with padding to allow for the header and footers:
header {width:100%;position:absolute;top:0;left:0;...}
#content {display:block; min-height:100%; padding:50px 0 100px 0; ...}
http://jsfiddle.net/Ds5tX/3/
Related
I have just started HTML/CSS this week, so sorry if I sound stupid anywhere. Anyway, here's my question:
I am programming a website where all the content is enclosed by a border. The margins to the left and right are 25%. Now, when I shrink the browser, all of the content stays 25% inside the browser always. I want the site to first use up the 25% free space on the left and right... If I'm not explaining properly, I'll show an example. When you are reading a PDF file(http://www.kb.nl/sites/default/files/docs/pdf_guidelines.pdf open to try) and you shrink the window size, the A4 page sized block (all the content) does not shrink until all the grey space on the left and right has been used up. I want to have that in my website. Here are screenshots:
http://i.imgur.com/uhq035r.png <-- full size
SKkt4DK.png <-- shirnkied window
Cant post more than 2 links, that's why i only put the image ID. So yeah, how can I achieve this?
Edit: I've tried the positioning properties before but it didn't work.
What you need to do is have your inner content sit in a container. The container's width should be 100% of the page, and your inner content's left/right margins set to auto.
That way when the page's width shrinks, the container still takes 100% of the width, but the inner content's margins are adjusting to the new changes.
HTML
<div id="container">
<div id="content">
</div>
</div>
CSS
#container{
width:100%;
height:800px;
background-color: gray;
}
#content{
width:800px;
height:100%;
background-color: green;
margin: 0 auto;
}
Demo :
http://jsfiddle.net/zvo4u72x/
Adjust accordingly, but using this sample code should demonstrate what you need.
I've seen other answers around, but they either didn't work, or involved JavaScript. Could some sort of #media query solve this?
I have a JSFiddle to show an example of the issue: http://jsfiddle.net/e4VWL/
You can see <footer class="copyright"> looks awkward because the left border on .wrapper isn't reaching the bottom of the page.
I want to find a CSS only solution to make the final div occupy the remainder of the height of the page for the browser viewing.
Give your body, html, and wrapper elements a height of 100%.
body,html,#wrapper {
height: 100%;
}
jsfiddle
I want to create an HTML/CSS layout for a page where there are multiple images that poke outside the content area of the page. The layout for the content area is fixed width and centered. I do not want scrollbars to appear if the user's window is as narrow as the content area.
The content area is a container div with a fixed width and margin: auto 0;
Ideas I've considered:
Use CSS 3 Multiple Backgrounds on the <body> tag. The background elements would have to be relative to the body, and wouldn't center with the content area.
Use negative margin or relatively positioned divs. This would make scrollbars appear if people had their browser width smaller than the width of the images that poke out past the content area.
I want the images to be kind of bonus content for people who have their browser windows fullscreen but not seem necessary.
Here's some example HTML/CSS that would simulate this example.
css:
#containerDiv {
width: 910px;
margin: 0 auto;
}
html:
<html>
<head>[...]</head>
<body>
<div id="containerDiv">
<header>HEADER</header>
<section id="contentArea">
<h1>Content</h1>
</section>
<footer>FOOTER</footer>
</div>
</body>
</html>
The scrollbar problem of your second idea could be simply fixed by setting:
body {
overflow-x: hidden;
}
The images would appear as much as they can according to the window size of the client; thus they would look like background, and only appear to those who have a higher screen resolution, without cluttering the lower-resolution people's screens.
Edit:
To get the images as you put in the example, use position: absolute and set their lefts, rights and tops as you see need. You could use a script to check whether the page hit a certain height; and when so, add the next picture you set.
I am currently working on a site that requires a footer to be placed either at the bottom of the window, or the bottom of the page content, whichever is lower. I have tried using the height: 100% method, but this causes a problem.
I also have a position: fixed header, and some padding on my content (defined in pixels). Also, the height of the content may change after the page has loaded (use of accordions, etc.), so I wonder if there's a pure CSS way to position the footer to either the bottom of the window, or the bottom of the document, while still allowing pixel padding and so forth.
Here's an outlined structure of the HTML:
<header></header>
<div class="content">
<footer></footer>
</div>
I have also put together a Fiddle to demonstrate how the CSS works at the moment: http://jsfiddle.net/LY6Zs/. I am unfortunately unable to change the HTML structure (i.e. breaking out the footer element from .content.
You first need to have a container div just after the which contains all the content
.container
{
min-height:100%;
position:relative;
margin:0 auto;
}
.footer{
position:absolute;
bottom:0;
}
I have a Jquery tools scrollable thats set to be fixed to the bottom of the browser window.
All I want to happen is for the page to be able to scroll vertically when the browser is less then 700px high. (so no content gets hidden, as its all fixed place). This feels like it should be simple but its causing me huge headaches. js solutions are fine at this point.
Thanks in advance.
http://www.vagabondbrigade.com/staging/berns/
If you are referring to the content that is being cut off at the top of the page, I would recommend putting top and bottom margins on your css page to the proper elements to harness their positioning.
You could do a fixed height or width for the main structure of the page and then the other elements that you want positioned, position them accordingly.
example:
/* html */
<div id="main_structure">
<div id="content">
blah blah blah
</div>
</div>
/* css */
#main_structure {width:100%; height:700px; margin:20px 20px 20px 20px; padding:20px;}
#content {width:200px; height:200px; padding:10px; margin:20px;}
Playing with Firebux on your page (the link that you've provided), I've added at div.floor_items a property overflow:auto; and the problem was fixed ;)
The content was bigger that my test screen resolution, and the content wasn't all visible, but with that change, the scroll bar appeared and allow me to scroll and view the "off screen" content!
This is your solution, if that was your problem!
Have you tried using css media queries
either by adding overflow-y: scroll to html or your containing element?
http://www.w3.org/TR/css3-mediaqueries/
#media screen and (max-height: 700px) {
#your_element_to_scroll {overflow-y: scroll;}
}
This will not work in older version of IE.