I'm in the process of building a mobile website that is targeted towards developing countries, which means that most of the mobile phones will be older feature phones using pretty basic browsers with limited css support and typically no javascript.
One of things I'm trying to achieve is a fixed footer solution that would be supported on older browsers.
Via this site I found a link to this solution Ryan Fait Sticky Footer which seemed good in theory but which I cannot get to work.
Here is my jsfiddle which is my understanding of how the code should be implemented. Would appreciate it if you could have a look and let me know what (if anything) I'm doing wrong
Jsfiddle
Here is my partial code;
HTML Code
<body>
<div class="wrapper">
<p>Text</p>
<div class="push"></div>
<div class="footer">This is a test</div>
</body>
CSS
* {margin: 0;}
html, body {height: 100%;}
.wrapper {min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -155px;}
.footer, .push {height: 155px;}
You've not closed the wrapper DIV. Close this before the footer. See the new fiddle.
http://jsfiddle.net/sF4EB/3/
Be aware, this won't stick the footer to the bottom of the window at all times (you need to use position: fixed for that), just at the bottom of the window if the page isn't tall enough to push it there, otherwise it will remain at the bottom of the content.
Related
The situation: So my website is divided into sections first div inside the body is just a main container then inside of that main container there's 3 div elements first is the header second is the body or content and third is the footer.
The problem: On some browsers or more specifically on any browser on Iphone mobiles or ios. my footer is showing on top of the middle of the body div (content section) but on any other android phone it's looking just fine or on the normal browser..
screenshots:
(normal) on any android device:-
screenshot on any android phone
(problem) on any IOS device:-
screenshot on any ios phone
shared.css file that contains all the css for these pages:-
https://github.com/11abuyaman/majed/blob/master/CODE/CSS/shared.css
link for the page that has the problem:-
https://11abuyaman.github.io/majed/CODE/HTML/About%20us.html
UPDATE:
I'm only using the flex on #clouds_body so I can be able to fit the body right in-between the header and footer and I want the footer to stuck on the bottom even if the body wasn't taking enough space.
please help, thanks in advance.
This is a Safari issue, and you can solve it by removing display: flex on #clouds_body. If you're not using flex-direction: row, it's kind of useless to use flex on it anyways.
I also removed the flex while watching the page on Mac Firefox, and nothing changed.
EDIT
Based on the comment I got.
Change height: 100% to min-height: 100vh in #clouds_body.
This will, however, open up for other issues Safari have with your page, but that's beyond your original question.
html code:
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
css code:
#container{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
This will work! This will arrange div's one below the other!
I don't even know if what I am asking is possible, but it's worth a shot. Basically I have a one page scrolling website controlled by jQuery, but it's a very very simple code, no plugin or external doc. That works great.
Every "page" if you will is divided into different divs to separately control function of pictures, tables, fonts, etc. per each page. Like this:
//home page
<div id="home">
content here
</div>
//about page
<div id="about">
content here
</div>
and so on and so forth... my question is, can i do something like this? I've tried but maybe I don't have the "decimal" in the right spot...
//home page
<div id="home resize">
<div id="home">
content here
</div>
</div>
//about page
<div id="about resize">
<div id="about">
content here
</div>
</div>
and then CSS be
home resize {
position: relative;
height: 100%;
width: 100%;
}
Two things I see right away. First, your CSS rule should be .home.resize instead of home resize. Second, height, when using percentages, requires that the height be set on the html tag to make a difference. So you will need rules such as this:
html {
min-height: 100%;
}
.home.resize {
height: 100%;
}
Otherwise, height will never take up the entire browser window height.
This all being said, I would guess that your best solution would involve JS or jQuery in some way. I know there are several single page scrolling plugins that do this job quite well.
First things first. HTML id's cannot contain spaces. You should define a class name resize. That being said. You can achieve this by using this.
Here is a fiddle
div id="home" class="resize">
content here
</div>
<div id="about" class="resize">
content here
</div>
.resize{
display:block;
height:100vh;
margin:0;
}
#home{
background-color:red;
}
#about{
background-color:blue;
}
vh is viewport height. It will set the height of your div same as viewport. 1vh is equivalent to 1/100th of viewport height
before I ask the question here are my two constraints:
should work in IE 7+
I can only change the CSS, I can not change the HTML/JS
So, I've got two div's:
<div id="content"></div>
<div id="footer"></div>
"#content" is the content.
"#footer" is a footer which only contains a background image and nothing that is really of value.
Now, how can I hide part of the footer when the page is so long that it scrolls, but display it completely when the page doesn't scroll?
(So far, I have tried stuff like:
#footer {height: 30px; margin-bottom: -20px;}
but that doesn't seem to work...)
here you have a solution only with HTML and CSS:
Source:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Example:
http://www.cssstickyfooter.com/
Good Luck
I have noticed a discrepancy between the heights of my divs in Chrome (which looks good) vs FireFox/IE.
Here's my HTML markup (I removed all the other tabs from this just to keep the code clean):
<div id="RightPane">
<div id="RightPaneContent">
<ul>
<li>Plan View</li>
</ul>
<div id="tabs-6">
<%= Html.Partial("PlanViewTab", Model) %>
</div>
</div>
</div>
#RightPaneContent
{
min-width: 433px;
height: 100%;
}
Here's how it looks under Google Chrome. Note how RightPaneContent expands to fill the entire height of viewport.
Here is how it looks under FireFox. Note how RightPaneContent did not expand to fill the entire viewport:
Does anyone have any advice on what steps I should take to achieve similiar functionality under both environments? Or at least some reading material on what is happening here?
Per CSS spec, height: 100% means the same thing as height: auto if the parent is auto-height. Does your <div id="RightPane"> have a height specified? If not, chances are your page is in quirks mode, and WebKit just violates the standard slightly more in that mode than Gecko does.
Im making a website http://nebkat.com/beta/index.php and there is a grey background and a white background for content(see for yourself). The problem is that I cant set the white part to be 100% height. It only stays up to the title(Welcome...) and then it stops.
Heights specified in % will not be honored by the browser (edit: I mean to say they wont work the way you expect them to).
You need a clearing div inside your <div id="container"> div. Here is where you should place it:
<div id="container">
<div id="logo">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<!-- HERE -->
<div style="clear: both;"></div>
</div>
set the height of your #container div to be 100% this should fix the problem (at least it will in firefox 3.6).
You should really install a tool like Firebug for firefox, you can use it to 'live' modify css properties on websites. it makes it really easy to figure out issues like this.
give height as 100% for container div and that would solve your problem.
this answer should be updated with this one: Make div 100% height of browser window
body,html{
height:100%;
}
#container{
height:100%
}
Well you will use min-height:100%; or min-height:500px.
That can solve your solution.
The height: 100% in CSS doesnt't work as you'd expect.
My solution would be to write some simple JavaScript which measures the available height, and then sets the div's height appropriately.
It should be pretty straightforward, but if you need any help, I'll put it together for you.:)