I've got two pages, page A which has a lot of content and requires scrolling down, and page B which has little content and only takes up half the browser window. I'm trying to stick a footer down at the very bottom of both pages, regardless of the size of their content.
Here is what I've been trying to do. I've two containers inside the body, one for footer and one for everything else, call it main-wrapper. I've put borders aroudn the wrappers and body to see wheree they take up. Main wrapper will take up all the content on page A, but on page B it will only sit around the actual content, it's bottom-border is half way down the page, even though the body body takes up the full screen. I've set the main-warpper height to 100% so why won't it take uo the full body???
This is how I would approach this situation. It sounds like you need to set a min-height on your main-wrapper instead of just having it's height set to 100% of the filling container. Due to screen sizes greatly varying from user to user, you'll need to use a little javascript/jquery to try and calculate the page height. Try something like this
$(document).ready(function() {
var pageHeight = $("body").height();
pageHeight -= 200; // Whatever the height of your footer is. Make sure to subtract that out
$("#main-wrapper").css("min-height", pageHeight + "px");
});
Related
In a project I am working on, I am trying to get the page's header height to be 5% of the screen. Obviously this is done with height: 5%;, however, I need the header to stay at 5% of the whole screen at ALL times. This means that if I were to shrink the browser window, the header div does NOT shrink proportionally as well. I need it to stay the same size, but the size needs to be set with the initial percentage. A website that I used for reference was github.com, as their header stays one size even when the browser window is shrunk. Flickr.com is another example of what I am looking for in a header. I have tried to use min-height: XXpx; (replacing the 'x' with numbers) but that was not effective.
Use JavaScript once the page has loaded to calculate the 5% of the window height & assign it to the header as its CSS height value. It will overwrite any set CSS values.
var h = window.innerHeight * 0.05;
getElementById('your-element-id').style.height = h+'px';
did you tryed vh(vertical height) calculation?
example
navbar{
min-height: 5vh;
max-height: xx;}
This question already has answers here:
Help with footer always to bottom
(6 answers)
Closed 8 years ago.
I made a site for a friend of mine. You can see it here.
The thing is i want the bottom part of the page actually be on the bottom of the site. And the images resizing with another resolution.
Example:
Watching the site on a 1366x768 resolution the page is always in view like here:
But when i switch on a higher resolution with a bigger height(1280x1024) it looks like this
As you can see there is many space between the bottom of the page and the bottom of the site itself.
I want it to keep it like the 1366x768 resolution always "fullsite" the images getting bigger at a higher height and the "footer" is always at the bottom of the page. Like a dynamic fullscreen page.
I hope you can help me i thought about media queries but i am not sure if this is the best solution and if so how it would be the best to actually query them.
Thanks for your time i appreciate your help !
I don't think it's a good practice to fix the footer to the bottom, because it would hide content and worst case would be no space for any content if the window height is smaller than nav height + footer height.
In this case if you really want to move the footer to bottom, I'd rather use some javascript to add padding-bottom to the content (slider in this case), if the window height is bigger than your website height:
var windowHeight = window.innerHeight;
var websiteHeight = parseInt(window.getComputedStyle(document.body).height);
if (windowHeight > websiteHeight) {
var diff = windowHeight - websiteHeight;
document.getElementById('slider').style.paddingBottom = diff+'px';
}
Put this inside a function and call it in body onload. Notice that if you hover over the shoe, the content height will increase and move the footer down further. Thats why in responsive design you usually don't fix things vertically, but instead let the content height be a flexible variable...
Another approach would be CSS min-height property on the content to make it take up a minimum amount of the browser height.
Please look at this website , I use section for every page, as you can see by going to down to the second page there is some extra space that belongs to the first page(the following picture).
There are four section and every section height is set 100%. then why there is an extra space there?
The min-height for the body is set to 1000px to ensure that each block you can scroll to on the site has enough space to cover the viewport. So, if your height at 100% for one section is less than the 1000px minimum, then you'll end up with a huge space because the minimum is larger than what you really need.
You can optionally set height to an absolute value (x px where x < 1000) until the space is gone. Something like #s1 { height: 700px; } would work, where #s1 is the section you pointed to in your question, and 700px is an example of a height that would mostly remove that space, but leave enough in between sections 1 and 2. Feel free to modify that value until you're satisfied with the look.
What you need is javascript. This is off the top of my head, and is general, but try something like this:
jQuery(function($){
$(window).bind("load, resize", function() {
var sections = $("section");
var height = $(window).height();
height = $(window).height();
$(sections).height(height);
});
});
I've got photo gallery app with a fluid layout. The #header & #controls are set to position:fixed so that when the user scrolls, they stay on the top of the window.
The div that contains all the photos, #people, is positioned below the controls with padding. On a standard 1280 x 1024 window everything looks fine.
However, when the window gets smaller, the controls wrap, and #controls gets taller. Consequently, #people then gets partially hidden.
Is there a CSS only way to make #people move to accommodate the height change? I'm fairly certain there isn't, as fixed elements get taken out of the document flow. I thought I'd ask anyway.
Update Here's an example: http://jsfiddle.net/hbms2/9/. At the default display, all the blue controls are on one line. When you resize the pane narrower, and they jump onto multiple lines, you can see "#1#,"#2",etc get covered.
Well, this is pretty simple. You set #controls to width:100% that means it will only be as wide as the window. What you should do, since it is fixed positioned, is set the sides to left:0; right:0; (so it covers the page) and the min-width wide enough to fit your controls.
body {
min-width:700px
}
#controls {
left:0;
right:0;
min-width: 700px;
}
Now when you resize the window to less than 700px, your controls will not squish together, and you can use the scrollbar to access off-screen content.
Here it is using your jsfiddle: http://jsfiddle.net/hbms2/14/
Note: I only applied the fix to the controls section, content in the other div's will still squish together since you specified their width with a percentage. (You should avoid doing that) However, you can fix it using the same method.
The control elements will still be hidden if the viewport is smaller than their width. There is no way to fix this using CSS; you would have to use javascript (which would be complicated, cumbersome, and probably wouldn't even yield the desired result) or you can make another site designed for smaller viewports. The latter is by far the better option.
Thanks for making the example like I suggested, it makes answering the question a lot easier.
The only pure CSS solution I know that will even come close are media queries, and you'll have to do a lot of trial and error, and eventually the result might not be 100 perfect.
Therefore, I resorted to JavaScript (jQuery for comfort).
You can achieve this by testing $(window).resize and changing the margin-top of the #people element to match #header's height.
Here's an example!
What I did:
$(function() {
$people = $('#people'); //Cache them to not waste
$header = $('#header'); //browser resources.
$(window).resize(function() { //When window size changes
//Check if the height changed
if ($people.css('margin-top') != $header.height() + 5) {
//Change height if it has.
$people.css('margin-top', $header.height() + 5 + 'px');
}
});
});
I am just giving it a try and I am playing around, but would something like this with dynamic heights work?
http://jsfiddle.net/hbms2/10/
Or am I completely on the wrong track here?
I've got my site content inside an 800px-wide div, I'd like that div to be centered on the page until the browser window width extends past certain distance. At that point, I'd like the content to "lock" into place and not continue to center itself, staying a fixed amount from the left edge.
For example, if the viewers window is 900px wide, then they will see my 800px content centered. If the viewers window is 1400px wide, they will see my content 400px from the left side, locked in that spot.
You might be thinking this is a weird question to ask, and it is! But it's fairly integral to my design for it to work this way.
Setting the container element's max-width to 1700px (900 + 400 * 2) will ensure that the content is never more than 400px away from the left side, provided that the container is not centered itself.