I'm creating a template using bootstrap and the content area is adjusting self according to contents inside it. and if there is less content text then footer and nav gets so closer like see this pic if there is no content text.
image
How can I set minimum height of content so that footer will stay on browser footer and there will be space for content between header and footer.
You could use css like this to set the minimum height to that of the viewport:
minimum-height: 100vh;
The first approach is to make sticky footer when you are using bootstrap, add the class footer in footer wrapper and it will stick to the bottom.
Take a look at the example template provided by bootstrap
Bootstrap sticky footer Template
Related
I am trying to print the footer on all the pages including the page number but didn't find any solution. I tried using #footer{position: fixed; bottom:0;}, body content is overlapping with the footer during print.
Thank you for your time.
You can add margin-bottom to the content equal to the height of footer that will ensure that there will be an empty space between the body content and footer.
Howto change header section into a smaller width but in the sametime have it inline with content column width.
This is a picture of what I am talking about: http://i.imgur.com/Culy2Ro.jpg
You see the header section is smaller then the content column. But they are still inline.
Set width:100% and position:absolute to your header.
depending on the content in my page how can I get the footer at the bottom ?
In gridview if i select page size above 20 the footer is overlapping on the gridview box.
I tried the CSS property - position:absolute,bottom:0; as well as overflow:auto...
It dint help the footer is remaining in the same place behind the gridview.can someone pls help me
Thanks.
Check this fiddle:
Format your page layout as in the fiddle. set the min-heightof your container div to
total height - (height of header + height of footer)
(in the fiddle header and footer occupy 15% and 10% height respectively. so the content is given
min-height:75%; // 100%- (15%+10%)
so that it'll always occupy that much space even if your actual content is less.
If your content is more the container div will automatically expand and pull down your footer.
if you apply position:absolute your element will be taken out of the normal flow, then the footer won't be pulled down by the content if it expands.
How is it possible to have a fluid div change it's height according to the content in css alone, or do I have to do it in PHP?
The reason why is because I am making a theme for Drupal and the content will change for each page of the theme.
For example, the middle content div doesn't have a set height, but depending on the article or page length specified in the Drupal back end, the content div will change accordingly.
Amar
If you have a fluid content div in non fluid div, then you must add clear both div after the fluid div, so non fluid div have same height as inner fluid div
<div style="clear:both"></div>
I am having some trouble with the layout of a website that has a header, content, "sticky" footer, and a sidebar. The sticky footer, header and content combination is not a problem by itself, but I can't for the life of me figure out how to add a sidebar that goes from the header right down to the footer without messing up the "stickyness" of the footer.
The way I am approaching it now involves absolute positioning. I basically make a header div (height: 71px; top: 0px;), a footer div (bottom: 0px; height: 30px;), and a content div (top:71px;bottom:30px;). I then float the sidebar left inside the content div and make its height 100%, and add another div (call it "view") next to it for the actual site content. This makes sure the sidebar is nicely from the top to the bottom, and the footer is normally at the bottom of the page.
However, problems arise with this approach when the window is resized, especially so when the content is too large to fit in the "view" div itself. This results in the footer cutting off the content, and scrolling down makes the footer move up in the window. I would like to achieve a footer that behaves like this, but also have a sidebar that ALWAYS stretches from the header to the footer of the page.
If anyone could think of a way to add a such a sidebar to the page linked above or has any ideas on how I could go about tackling this problem, it would be greatly appreciated. Thanks beforehand.
Do you think you could post some example HTML and CSS you have besides just the div height and positioning?
What I was thinking is you could throw another <div> inside the sidebar <div> and set the margin-bottom or padding-bottom to 30px. I'll work on a jsFiddle for you.
You can always put an overflow: auto on your view div.
http://jsfiddle.net/dzRZd/
Edit:
With fixed positioning instead:
http://jsfiddle.net/ekSvQ/2/