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;
}
Related
I have been able to create a centered vertical line but it increases my webpage width off of my screen! I would like some insight on how I can create a centered vertical line down my page while keeping page width to fit my screen (so that there is no horizontal scroll bar).
When I have removed the line my page width is perfect therefore I do not think it is one of my divs causing the problem.
body {
background-color: lightblue
}
.vertical_line {
border-left: 6px solid black;
height: 500px;
position: relative;
left: 50%;
margin-left: auto;
z-index: -1;
}
.section-2 {
width: 100%;
height: 200px;
}
.section-3 {
position: relative;
top: 50;
width: 500px;
height: 60%;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: green;
}
<section class="section-2">
<div class="topnav">
<a style="background-color:grey; width:100px">this is my nav bar</a>
</div>
<div class="vertical_line"></div>
</section>
<section class="section-3">
<div class="paragraph"></div>
</section>
<div class="vertical_line"></div>
Problem arises because you used position: relative; and shifted it 50% left, but it means element is still part of flow and shifting it pushes it past the edge of the screen. On the other hand position absolute removes it from the flow. But if you want to use position: relative; for some reason, then add overflow-x : hidden; in the body, it will work fine in your case. Also a good CSS reset always helps, so as you do not get unexpected scrollbars.
* {
padding: 0px;
margin: 0px;
}
body {
background-color: lightblue;
width: 100%;
min-height: 100vh;
}
.vertical_line {
border-left: 6px solid black;
height: 500px;
position: absolute;
left: 50%;
margin-left: auto;
z-index: -1;
}
.section-2 {
width: 100%;
height: 200px;
}
.section-3 {
position: relative;
top: 50;
width: 500px;
height: 60%;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: green;
}
<html>
<section class="section-2">
<div class="topnav">
<a style="background-color:grey; width:100px">this is my nav bar</a>
</div>
<div class="vertical_line"></div>
</section>
<section class="section-3">
<div class="paragraph"></div>
</section>
<div class="vertical_line"></div>
</html>
With help of overflow-x: hidden; and position : relative; :
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
min-height: 100vh;
overflow-x: hidden;
}
.vl {
border-left: 6px solid black;
height: 5000px;
position: relative;
left: 50%;
}
<html>
<body>
<h2>Vertical Line</h2>
<div class="vl"></div>
</body>
</html>
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
I am trying to make the footer stay at the bottom of the page, NOT the bottom of the screen (fixed) but at the bottom of the entire page, so you can only see it after scrolling to bottom. However, for some reason it stays above the bottom, and I can't seem to find the reason...
FIDDLE:
https://jsfiddle.net/okfudezn/
Image:
HTML (the div has no wrappers etc):
<div class="footer">
<a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
</div>
CSS:
.footer {
background-color: #4b4c46;
height: 55px;
line-height: 55px;
width: 100%;
text-align: center;
color: #e1dac5;
font-size: 14px;
}
Just change replace you content div height to auto
updated fiddle
.content {
position: relative;
width: 650px;
height: auto;
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
margin: 0 auto;
margin-bottom: 80px;
top: -100px;
}
I would try with:
.footer {
position: absolute;
bottom: 0;
}
Change this css
.content {
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
/*height: 650px;*/ /*Remove this*/
margin: 0 auto 30px;/*Change this*/
overflow: hidden;/*Add this*/
position: relative;
/*top: -100px;*//*Remove this*/
width: 650px;
}
.grid {
width: 600px;
/*height: 1000px;*/ /*Remove this*/
margin: 0 auto;
padding-top: 30px;
}
https://jsfiddle.net/okfudezn/
Here you go!
html, body {
margin:0;
padding:0;
height: 100%;
}
#container {
position: relative;
height: auto;
min-height: calc(100% - 54px);
padding-top: 54px; /* Header & Footer */
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 54px;
background: red;
}
#content {
background: orange;
height: 100%;
}
#footer {
position: absolut;
bottom: 0;
width: 100%;
height: 54px;
background: yellow;
}
.simulateContent {
height: 1000px;
}
<div id="container">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT START
<div class="simulateContent"></div>
CONTENT END
</div>
<div id="footer">
FOOTER
</div>
</div>
I am currently creating a scrolling (long) page. I have encountered a problem with the footer though. Since the wrapper has an absolute position, the footer goes behind the wrapper, instead of sticking at the bottom of the page. How can I make it so that my footer will stick at the bottom of the page on all resolutions?
http://jsfiddle.net/Kzh7z/
You can see the little blue part of it sticking behind the wrapper.
HTML:
<div id="wrapper">
</div> <!-- end wrapper -->
<footer>
<div id="footer">
<div class="copyright">
<p>footer copyright blah etc</p>
</div>
</div>
</footer>
CSS:
#wrapper {
background: #CCC;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
width: 1000px;
height: 1200px;
position: absolute;
}
#footer {
background: #0A59C2;
border-top: 5px solid #06489E;
width: 100%;
height: 85px;
}
Thank you!
EDIT: Updated to reflect what was discussed in the comments.
This will keep #footer at the bottom and keep #wrapper above it. position: absolute is not necessary for #wrapper.
#wrapper {
background: #CCC;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
width: 1000px;
height: 1200px;
position: relative;
overflow: auto;
z-index: 1;
}
#photoContent {
border: 10px solid #F5F5F5;
box-shadow: 0 0 7px;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
width: 781px;
height: 231px;
background: #FFF;
margin-top: 12px;
}
#footer {
background: #0A59C2;
border-top: 5px solid #06489E;
width: 100%;
height: 85px;
z-index: 2;
}
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;
}