EDIT: I am posting a screenshot to show the issue I am describing. I have tried about more than half of those techniques shown on the post that this question was closed for but it just sits at this one spot near the bottom of the page when the screen is resized; it shows fine whenever it's not resized. The absolute-bottom method makes the only "change" to it, but instead of fixing it, it makes it sit near the very top of the page, right under the nav header. Otherwise, any other method I try does nothing and just makes it sit about near the bottom of the page. From the picture, the blue drawn square is the fixed nav header, green one is main content, and the red one is the footer clearly sitting (why it's highlighted) as the background on one of the previous elements on the page. I want it to sit at the bottom like when it's regular screen sized.
First thing, I get this is a VERY frequently asked question, and for that reason avoided asking it, but I have spent a whole day of searching, trying so many different techniques, even changing code that feel might be affecting it in some way and I'm still stuck at start. Just want a sticky footer (not fixed) that stays at the bottom even when screen is resized (responsive.)
Right now it looks fine, I'm guessing because there's enough content, but when the screen is resized for small screens, it appears a good bit above from where it should be and so it ends up as the background of one of the previous elements on the page. The last approach I used was this flex method, https://css-tricks.com/couple-takes-sticky-footer/. What am I doing wrong here?
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
img,
form,
fieldset,
input,
textarea,
blockquote {
margin: 0;
padding: 0;
border: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
font: 16px/30px "Helvetica", sans-serif;
margin: 0;
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
#header {
height: 110px;
position: fixed;
width: 100%;
background: white;
background: -moz-linear-gradient(top, white 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, white 0%, #ffffff 100%);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
z-index: 10;
flex: 1;
top: 0;
border-radius: 2.7px;
}
#content {
width: 100%;
flex: 1 0 auto;
background-color: white;
}
footer {
width: 100%;
height: 180px;
background-color: #001e33;
flex-shrink: 0;
}
/*media queries for footer*/
@media only screen and (max-width: 575px) {
footer,
.flex-footer {
height: auto;
}
.footer-left img {
height: auto;
}
#bottom-footer .footer-center,
#bottom-footer .footer-right {
display: none;
}
}<body>
<!--Nav bar starts-->
<nav id="header" class="navbar navbar-expand-md">
<!--nav content here-->
</nav>
<!--Main content starts-->
<div id="content" class="container-fluid p-0 m-0">
<!--ton of content inside here-->
</div>
<br>
<br>
<br>
<br>
<!--footer begins-->
<footer>
<!--footer content here-->
</footer>
<!--get jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Popper JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Latest compiled bootstrap JavaScript -->
<script src="https://kit.fontawesome.com/d1c246b541.js" crossorigin="anonymous"></script>
</body>NOTE: This is just the main tags and css classes for those tags. Thank you!
