I found this question: CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
But this doesn't solve my problem, because the stone age email clients don't support all of this wizardy.
What is a good way supported cross most (or better all) email clients that pushes the footer to the bottom of the screen if the content isn't long enough?
When I set a min-height on the content the footer will sometimes outside of the screen and above is just a lot of whitespace.
position isn't an option here because thats not really supported and I don't want the footer to overlap my content.
Currently my footer has no fixed height.
As far as I'm aware, you can't. Website techniques require a calculation of the screen height, completed by the CSS method you're using and then distributing that dimension to the main content to allow the footer to sit perfectly at the bottom.
These techniques won't work in all email clients for all of the different screen sizes.
If your content is too short to reach the bottom of a phone screen, that's a bigger concern. I don't understand a full template build for a short message.
And setting a height on your content or padding the sections out enough so your footer is a little lower shouldn't be an issue in this day and age.
The fold is so over hyped.
Related
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
On my site http://math.byu.edu
I've been trying to make it responsive to screen size but I noticed a problem when I resize the broawser while on the page. If I shrink and enlarge the browser multiple times the min-height is dynamically getting set to a huge number and I end up with a lot of whitespace.
I've searched my php templates and my css and I can't find anythign that owuld be causing this min-height issue. Does anyone have any ideas?
As per the comments, just comment out the line positionFooter() from the $(window).resize() function.
The reason this theme has this script is to make sure the footer doesn't float into the middle of the page assuming the page has zero content. When the page has zero content, there's nothing to push the footer down. So that script is supposed to keep the footer at the bottom of the page, though it does it poorly.
For future reference, if you need a sticky footer (as it's called), I suggest using Ryan Faits Sticky Footer. Just wrap the content in a main wrapper, make sure the footer is a sibling of the main wrapper then use the supplied CSS to make it work.
Building this site and noticed that under 1100px it breaks (footer and header). I know its because of the absolutely positioned elements that hang on the side of the pages but can't figure out how to make sure the header/footer are 100% of the browser width.
Since its a parallax site I will spare the nonsense of pasting all the extra markup in here and send you to the direct link
Any thoughts or ideas would be fantastic.
I'm trying to have a sticky footer on my page but with a twist compared to what I've seen before.
The top of the footer as to always be sticky at 50px after the content and a green color as to fill the rest of the footer until the end of the page.
You can see an example on http://enviro2012.tapagecommunication.com
The problem is even better illustrate if you clicl on the "send" button in the Facebook plugin at the bottom of the page.
Let me know if you need more info! :)
Thanks!
I've had this one before. I tried all sorts of methods, including checking the window height against the vertical position of the footer, then setting the footer height to the difference. It didn't work too badly across most browsers.
However, the most simple (and fast-rendering) solution was to add enough bottom padding to the footer to cover the gap on most window sizes. Assuming your content is always going to fill the majority of the page, a few hundred pixels should be more than enough – and renders properly the first time the page loads.
I'm pretty sure the question has been asked and answered, I don't know HTML and CSS well enough to know where or how to search. Any help would be appreciated.
I have a community application built in Silverlight: http://www.scalerailsonline.com/default.aspx
Having finally decided to give Microsoft the chuck I'm rewriting it from scratch. 90% of is pretty easy. I'm struggling with the HTML and CSS to accomplish the chat portion of the app.
I've marked up a screen shot to show what I'm trying to do.
The main goal is to create a scrollable container that expands and contracts to fit the available space.
First I want to have the web page expand or contract to fit in the browser window.
Second Right column expands horizontally to fit the content and the bottom area expands vertically to fit the chat entry controls.
Once the page is fit to the browser and the space is committed to the right and bottom, i want the container to fit. If the content in the container is too much (99% of the time it will be), then vertical scroll bar will display.
I have tried all kinds of combination of width/height: 100%. But that just seems to make the areas big enough to fit the content, not constrain to a 100% of the browser.
I can set the div to "Height: 200%; Overflow: Scroll" to get the scroll bars. But I just don't seem to be able to get the div to expand only to the available space.
First I want to have the web page expand or contract to fit in the browser window.
This can be achieved by setting the margin left and right to auto. Try this -
.center {
margin: 0 auto;
padding: 0;
float: none;
}
The answer is: There really isnt a good answer. Resorting to java script resize event to set the hight of the box based on screen room - heights of screen elements.