How can I set a "spacer" div to fill remaining height space between CONTENT and FOOTER, so footer will be always at the bottom of the page (not window as originally asked)?
Here is a example where footer is not at the window's bottom: http://template1.staceyapp.com/ (I'm using this template, so structure is the same).
I've tried many things like creating a div and setting it to be min-height, height 100% etc.
Probably Javascript is needed for that.
Are you able to help me setting jQuery to calculate it's height to fill the remaining space?
Is there a better solution?
Many thanks in advance,
Graxa
You can use CSS to position the footer at the bottom of the page.
by using position: fixed or if the footer is contained within another div (container)
set the position of that to relative and the position of your footer to absolute and then specify bottom: 0; for your footer to keep it locked to the bottom of the page.
It sounds like you want a sticky footer, which sits at the bottom of the browser window or at the bottom of the content, whichever happens to be longer.
If that's true, check out: http://ryanfait.com/sticky-footer/
Have you tried to set the footer just to position:fixed on the bottom?
Related
I have created fiddle regarding the problem issue in link here
Header and footer are absolutely positioned and 100% width. The middle content consists of the dashboard table. Header consists of two images, which on clicked, will toggle the content.
When I click on slide-toggle-1, the content of headerbottombar is revealed.
But the middle content is hidden and overlapped.
How can I properly show content of middle content when the slide-button-1 and slide-button-2 is clicked.
I would like to thank for all suggestions and solutions. Solutions are acceptable either in css, jquery and javascript as long as feasible solutions are presented.
Why dont you try adding a class with margin-top to bring the div down as much as needed. Like this:
.top{
margin-top:100px;
}
Add this to you div with ".content" Like so:
<div class="content top">
Then just toggle it on the 2 clicks like:
$( ".content" ).toggleClass( "top" );
You can give additional styles, but this is the basic run down.
Update :
If you want a variable height header that's sticky to the top, you might have to use some javascript that dynamically adjusts the top margin of the content
var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';
Source
Old Answer :
There are many ways to achieve what you want. One is to change the position of header to relative (and remove the line breaks between header and content). If you use fixed or absolute position, the header will overlap with the body content. Whereas relative will push the content down as the header expands.
See this : https://jsfiddle.net/d0pyxdoj/3/
P.S. Header/Footer have position fixed in your code, not absolute
Please check the below example. Height identification using script we can inject the spacing.
Script:
function heightCalc(){
topHeight = $('.sticky-top').height();
$('.content').css({"margin-top": topHeight+"px"});
}
Example Fiddler : https://jsfiddle.net/scj4u0t5/1/
Assuming window height is 768px and content height be 1080px and
:
when I scroll to bottom, since winHeight < contentHeight, part of content is not shown. What can I do for this?
I had the same issue on one of my pages. Since overflow is set to overflow: hidden from the tutorial I was following I had to set overflow: visible for a couple specific sections so that all of the content would be visible.
Here's a jsfiddle: https://jsfiddle.net/Luw54j8x/
There is probably a bit of extra code in the CSS/js, but the important thing to pay attention to is the last few lines of the CSS. Remove the comment tags to see all of the content visible after scrolling.
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
If you check out this link, you will see that as you scroll down, the navigation has both affix and scrollspy functionality (From bootstrap 3)
http://codepen.io/datanity/pen/thnua
However, if you add white space at the top, the affix/scrollspy occurs in the wrong location. For example, this is with 800px of white space ontop.
http://codepen.io/datanity/pen/haKzg
Now of course here, you can adjust the affix/scrollspy code so that way it works with the 800px height ontop but, my problem is that I have no idea what space I will have on top. Sometimes it will be 2000px other times only 300px. Also, there is no way for me to know the id/class of the divs that appear ontop. Sometimes it will be 10 divs, sometimes 0, and they will always have different id/classes.
Is there a way that the affix and scrollspy can be triggered relative to the container it is in, and not a fixed px location from the top of the body?
Thanks for any help!
Tim
adding this to the top of the js fixed the issue. With this method, it does not matter how much white space or how many divs you have ontop. Your bootstrap scrollspy and affix will always be in the correct place!
$('#mynav').affix({
offset: {
top: $('#mynav').offset().top
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
});
Add an ID to the section element (located at the top of the HTML page). I'm assuming this is the element that you're concerned about changing heights.
<section id="top-section" style="height:800px;">
</section>
Then add these lines to your JS file:
var $h = $("#top-section").height() + 280;
$("#mynav").attr("data-offset-top", $h);
This queries the rendered height of the section element, and then fixes your sidebar response height accordingly.
If you will also have an unknown amount of sections, then you should wrap the code that creates the sections in a div element. For instance, if you're using PHP to build the section area of your webpage, you should do something like this:
<div id="section-wrapper">
<?php echo "Whatever code you have here" ?>
</div>
i'm having a problem using the scrolltofixed jquery plugin
https://github.com/bigspotteddog/ScrollToFixed
i use:
$('#tostick').scrollToFixed({ limit: $('#app-footer').offset().top - $('#tostick').height() - 20});
my #tostick is inside a
margin:0 auto
div container and as soon it hits the fixed footer and the script switches from fixed to absolute positioning it jumps out of the container because
left: 1107px
is applied, which is the distance to the left border of the browser window, instead of the left border of the centered div container. it tried to add:
offsetLeft: -$('#container').offset().left
which is completely ignored.
thanks in advance for any tip!
You need to give more info we don't know what #tostick is. Obviously we need the whole JS, and related html and css. Have you tried moving the entire container div it its only purpose is to have a style of margin:0 auto?
Also you can do:
$('#tostick').bind('unfixed', function() { $(this).css('left', ''); });//or what it needs to look right
$('#tostick').bind('fixed', function() { $(this).css('left', '1107px'); });//switch back to what it was