I've looked on previous SO posts and tuts but have not had any luck with my own code. My footer will not stick to the bottom of the page (not the window). I don't want content to scroll through my footer. The page sizes vary greatly in length and want to have a footer at the bottom at all times.
The leftcol, rightcol, and footer are all in the container. Any help would be awesome.
My HTML is structured as so:
<body>
<div id = "container">
<div id = "leftcol">
<h2></h2>
</p>
</div>
<div id = "rightcol">
<h2></h2>
</p>
</div>
<div id ="footer">
<p>...........</p>
</div>
</div>
</body>
Here is my CSS:
body {
font-family: 'Rokkitt', Georgia, serif;
font-size: 16px;
background-color: #FFFFFF;
line-height: 1.3em;
height: auto;
color: #252525;
}
#container {
display: block;
width: 1024px;
min-height: 100%;
margin-left: auto;
margin-right: auto;
}
#leftcol {
display: block;
float: left;
margin: 20px 5px 5px 15px;
width: 660px;
position: absolute;
height: auto;
padding-bottom: 20px;
}
#rightcol {
display: block;
float: right;
margin: 30px 5px 5px 780px;
position: absolute;
width: 275px;
height: auto;
}
#footer {
position: fixed;
bottom: 0;
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}
you need to move your footer outside of the container element and the body element and use position:absolute; and bottom:0; to always fix it to the bottom of the html element.
I say outside of the body as, although majoritively the body tag takes o the height of the html element, there are some versions of IE in which this isn't the case. As you haven't pasted your HTML i obviously can't show you the revised html but you're css should look like:
#footer {
position: absolute;
bottom: 0;
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}
Related
I have two elements [a custom button and a paragraph line]in my fixed footer (always stays on page) that I've been trying to horizontally align in the center.
<div class="footer">
<div class="co_footer_content">
<button class="func_button" >
<span class="func_button_ico"></span>
</button>
<p class="footer_txt">Small one liner {{varContent}}</p>
</div>
</div>
Here's the CSS
.footer{
height: 87px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ffffff;
}
.func_button{
background: transparent;
border: 0;
height: 44px;
width: 44px;
margin: auto;
display:block;
position: absolute;
cursor: pointer;
left: 0;
margin-left: auto;
margin-right: auto;
}
.func_button_ico{
background:url(./assets/func_button.png) no-repeat top left;
display: inline-block;
margin: auto;
height: 44px;
width: 44px;
float: right;
}
.footer_txt{
text-align: center;
padding: 0;
margin:0;
}
As seen in the above html snippet, there is varConent which changes the width of my content to some extent. So everytime the content changes, the <p> recenters. The height is fixed however i.e. the content doesn't go to more than one line.
I want the custom button to stick with this variable width <p> so that they are in the same line but also to be able adjust the button's position independent of <p> What would be the right way to do this?
Here's the codepen: https://codepen.io/johnsackson/pen/ZobMLj
<div class="co_footer_content">
<button class="func_button">
<span class="func_button_ico"></span>
</button>
<p class="footer_txt">Small one liner {{varContent}}</p>
</div>
</div>
CSS:
.footer{
height: 87px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ffffff;
}
.co_footer_content {
display: table;
margin: 0 auto;
}
.func_button{
background: transparent;
border: 0;
height: 44px;
width: 44px;
margin: auto;
display:block;
cursor: pointer;
margin-left: auto;
margin-right: auto;
display:table-cell;
vertical-align: middle;
text-align: center;
margin-right: 20px;
}
.func_button_ico{
background:url(./assets/func_button.png) no-repeat top left;
display: inline-block;
margin: auto;
height: 44px;
width: 44px;
}
.footer_txt{
text-align: left;
padding: 0;
margin:0;
display:table-cell;
vertical-align: middle;
}
This is my code:
The header is in fixed position, and I add a margin and padding zero to body
<body>
<header></header>
<div id="content">
<div id="center"></div>
<div id="a"></div>
</div>
</body>
body {
background-color: gainsboro;
margin: 0;
padding: 0;
}
header {
background-color: black;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#content{
margin-left: auto;
margin-right: auto;
margin-top: 60px;
width: 900px;
height: 100%;
}
#a{
background-color: white;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 500px;
border-radius: 2px;
}
Now I want to ask, why is body 60px lower. It should not body always be the top 0?
Here is a picture of this:
body height
The margin-top in your #content is pushing the body down. Please read more on collapsing margins.
Im currently building a website with a footer which should be sticked to the bottom, on my desktop (with chrome browser) it works fine, but when i'm trying the website on a mobile device, there is a little spacing underneath the footer, my question is how I can fix this?
My website can be found at: http://block-smash.com/beta and my code is as follows:
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
<center>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
</center>
</div>
</div>
<div id="footer">
© Mickael van Schie
</div>
and here my CSS:
html{
position: relative;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body{
background: rgb(230,230,220);
overflow-x: hidden;
margin: 0px;
}
#wrapper{
height: 100%;
width: 100%;
}
#header{
width: 100%;
height: 50%;
background: rgb(100,200,100);
}
#nav{
height: 125px;
margin-left: auto;
margin-right: auto;
margin-top: -62px;
}
#footer{
width: 100%;
height: 15px;
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}
.circle{
height: 125px;
width: 125px;
border-radius: 90px;
background-color: white;
border: 5px solid rgb(70,130,70);
display: inline-block;
margin: 0px 40px 0px 40px;
position: relative;
}
I got some jquery in the website aswell, but that is not necessary for the footer or any height in the page.
I've altered the code a little for you.
I think that the problem is with the body not being the maximum height. Therefore, the footer might stick to the bottom of the body, which stops somewhere near those circles.
The code I changed is the following:
html {
position: relative;
min-height: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body {
background: rgb(230, 230, 220);
overflow-x: hidden;
margin: 0px;
position: relative;
min-height: 100%;
height: auto;
}
As you can see, I gave html a solid height, and added a height and a min-height to the body, as well as a position relative.
The fiddle can be seen here.
Remove height property from your footer class.
#footer{
width: 100%;
/* height: 15px; */
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}
I am currently build the front end to a website using 100% height, so each section of the site takes up the viewport of display. (The site should look similar to others that use this technique such as Square Cash.)
The desktop site looks fine, but when making the site responsive the height does not stretch to the content. Making blocks run over the section. This may be because the height is set to 100% so it stops there.
The first welcome section is fine, but the second part of the site consists of 4 boxes (section tags) resting inside of a div tag. I am trying to get the boxes to be responsive staying within the container.
HTML:
<div class="top-section">
<nav>
<div class="nav-logo"><img></div>
Register
</nav>
<div id="center-column">
<h1>WELCOME</h1>
</div>
<div class="text-banner">
<h6></h6>
</div>
</div>
<div class="bottom-section">
<div id="center-box">
<section>
<h6></h6><p></p>
</section>
<section>
<h6></h6><p></p>
</section>
<section>
<h6></h6><p></p>
</section>
<section>
<h6></h6><p></p>
</section>
</div>
</div>
CSS desktop:
html, body{
height:100%;
margin: 0;
padding: 0;
}
.top-section{
height:100%;
background-color: #3498DB;
margin: 0;
padding: 0;
text-align: center;
}
#center-column {
position: relative;
margin: 0;
margin-top: 10%;
margin-bottom: 5em;
padding: 0;
}
.bottom-section{
height:100%;
background-color: #9B59B6;
margin: 0;}
#center-box {
width: 960px;
margin-left: auto;
margin-right: auto;}
section {
text-align: center;
margin: 2%;
float: left;
background-color: #8E44AD;
height: 300px;
width: 400px;
}
CSS MOBILE:
html, body{
height:100%;
margin: 0;
padding: 0;
}
.top-section{
height:100%;
background-color: #3498DB;
margin: 0;
padding: 0;
text-align: center;
}
#center-column {
position: relative;
margin: 0;
margin-top: 10%;
margin-bottom: 5em;
padding: 0;
}
.bottom-section{
min-height:100%;
background-color: #9B59B6;
margin: 0;}
#center-box {
width: 100%;
margin-left: auto;
margin-right: auto;}
section {
text-align: center;
margin: 0;
float: left;
background-color: #8E44AD;
height: 12em;
width: 90%;
}
Try using different percentages which total to 100% or less (including margins, etc.)
I am currently working on a HTML5 and CSS project and am having a problem getting the containers to display properly.
What I want to have is a header bar at the top, a wrapper that contains 2 other divs and then a footer at the bottom which is always at the bottom of the window or at the bottom of the content whichever is further down.
Here's a snippet:
html, body
{
padding: 0;
margin: 0;
}
#wrapper
{
position: absolute;
background-color: purple;
height: 100%;
width: 100%;
margin-top: 0px;
}
header
{
position: absolute;
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer
{
background-color: blue;
width: 75%;
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 80px;
}
#articleContent
{
width: 70%;
background-color: yellow;
float: left;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
float: right;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
float: right;
height: auto;
}
<html>
<head>
<title>index</title>
<link href="ArticleStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<div id="articleContainer">
Article Container
<div id="articleContent">
The quick brown fox jumped over the lazy dogs back. All good men must come to the aid of the party
</div>
<div id="articleSidebar">
Article Sidebar
</div>
</div>
</div>
</body>
</html>
At the moment the articleContainer is only the height of however many lines there are. What I want to have is the formContainer to fill the rest of the screen, I've tried adding the height: 100%; attribute but then this feels the form container over the screen size. I.e. a vertical scrollbar appears which is about the same height as the header. How can I get the formContainer to fill the available screen space without the scroll bar. However, if the content is larger than the form container should expand to fill the extra space.
Thanks for any help you can provide.
If you really want a css3 solution the one you're looking for is setting height: calc(100% - 80px); on #articleContainer as demonstrated in this fiddle, however this will not work in all browsers.
Example using old flexbox model css:
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#wrapper
{
display: -webkit-box;
-webkit-box-orient: vertical;
min-height: 100%;
background-color: purple;
width: 100%;
margin-top: 0px;
}
header
{
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer {
width: 75%;
margin: auto;
background-color: blue;
display: -webkit-box;
-webkit-box-flex: 1;
}
#articleContent
{
width: 70%;
background-color: yellow;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
height: auto;
}
same thing, but this time using new flexbox model
css
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#wrapper
{
display: -webkit-flex;
-webkit-flex-direction: column;
min-height: 100%;
background-color: purple;
width: 100%;
margin-top: 0px;
}
header
{
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer {
width: 75%;
margin: auto;
background-color: blue;
display: -webkit-flex;
-webkit-flex: 1;
}
#articleContent
{
width: 70%;
background-color: yellow;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
height: auto;
}
version with only the paragraph in yellow
I've used this method before, the tricky part is getting the header and footer in the right location. Once you have that the rest should fall into place:
jsfiddle:
http://jsfiddle.net/Ug5JR/
css:
html, body { margin: 0; padding: 0; height: 100%; }
header {
position: relative;
display: block;
background: red;
height: 100px;
z-index: 1;
}
article {
display: block;
background: yellow;
min-height: 100%;
margin-top: -100px;
margin-bottom: -100px;
}
article section {
display: block;
padding-top: 100px;
padding-bottom: 100px;
overflow: hidden;
}
footer{
display: block;
background: blue;
height: 100px;
}
p:hover {
height: 4000px;
}
markup:
<header></header>
<article>
<section>
<p>Hover me and I'll push the content larger than the page</p>
</section>
</article>
<footer></footer>
The trick is to get the negative margins to absorb the space used by the header and footer, this causes the 100% calculation to correct itself. You can then use any internal element to counter the negative margins with padding or margin on top and bottom. So whilst your article element is pretty much 100% height of the page, your article > section element will appear the right height and lay it's children out correctly.