Alright, Im having CSS problems here. My original question was CSS/html - make footer ONLY visible after scroll? stick to bottom just below visible page area? and I achieved the effect I wanted on ONE page with this html:
<div class="wrapper">
<h1 class="headertext">Welcome back.</h1>
</div>
<div class="footer">Footer</div>
And CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
min-height: calc(100% + 142px);
margin-bottom: -142px;
}
.wrapper:after {
display: block;
content: "";
height: 142px;
}
.footer {
background-color: white;
opacity: 0.5;
height: 142px;
text-align: center;
}
The problem is that the following:
* {
margin: 0;
}
html, body {
height: 100%;
}
which allows this to work has screwed up (really screwed up) every other page on my site and furthermore, doesnt have the same effect on the footer on these pages. Im looking for a simpler method of sticking the footer to the absolute bottom (just past the page content) JUST using the class selectors, i.e. no html, body, or *.
Ive tried putting height: 100%andmargin: 0 just in the wrapper and footer since these apply to all, but my footer either remains stuck to top of page or not visible at all.
Here is the CSS Im working with at the moment:
.wrapper:after {
height: 100%;
height: 89px;
}
.wrapper {
margin-bottom: -89px;
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
margin: 0;
width: 100%;
height: 100%;
min-height: calc(100% + 89px);
margin-top: 0px;
z-index: -1;
text-align: center;
}
.footer{
position: absolute;
bottom: 0px;
height: 89px;
background-color: rgba(255, 255, 255, 0.7);
opacity: 0.8;
text-align: center;
z-index: -3;
color: white;
}
Is there any way to accomplish this? Again, I don't want a fixed footer, I want it to just regardless of amount of content on page stay stuck just BELOW content. Im desperate here - have a broken site at the moment
Will this work for you ?
This is fully dynamic solution where the wrapper takes the remaining space left by the footer.
html, body {
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
flex: 1;
padding: 10px;
}
.footer {
background-color: white;
opacity: 0.5;
padding: 10px;
text-align: center;
}<div class="container">
<div class="wrapper">
<h1 class="headertext">Welcome back.</h1>
</div>
<div class="footer">Footer</div>
</div>If you by no means can use html, body { margin: 0; }, another option is using absolute positioning.
.container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
display: flex;
flex-direction: column;
}
.wrapper {
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
flex: 1;
padding: 10px;
}
.footer {
background-color: white;
opacity: 0.5;
padding: 10px;
text-align: center;
}<div class="container">
<div class="wrapper">
<h1 class="headertext">Welcome back.</h1>
</div>
<div class="footer">Footer</div>
</div>If you can't use flex, use display: table, it has the same dynamic feature for a sticky footer though you need an extra wrapper as a row
html,
body {
margin: 0;
}
.container {
min-height: 100vh;
display: table;
width: 100%;
}
.row {
display: table-row;
height: 100%;
}
.row ~ .row {
height: 1px;
}
.wrapper {
display: table-cell;
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
padding: 10px;
}
.footer {
display: table-cell;
background-color: white;
opacity: 0.5;
padding: 10px;
text-align: center;
}<div class="container">
<div class="row">
<div class="wrapper">
<h1 class="headertext">Welcome back.</h1>
</div>
</div>
<div class="row">
<div class="footer">Footer</div>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments