I have a wordpress site with Minamaze theme. It has some large pages and some small pages.
If the page is smaller than the screen, I want the footer to be placed at the bottom of the screen (and preferably vertical center the body).
If the page is larger than the screen, I want the footer to be placed at the bottom of the page (so visible after scroll down).
I have tried a lot of options like:
footer {
position: relative;
margin-top: -144px; /* negative value of footer height */
height: 144px;
clear: both;
}
and I see a lot about "wrapper", but none really work.
The site is http://www.samenherbestemmen.nl, hope someone can help.
NB: I have it now that the footer sticks to the bottom all the time, but I prefer the footer to be placed at the bottom of the page when the page is larger than the screen.
Codepen http://codepen.io/noobskie/pen/wKpWXO?editors=110
I Think what your referring to is whats called a "sticky footer"
I used the same html markup with your current footer but i didn't use any of your css so you could run into some conflicts worth a shot though
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
* {
margin: 0;
}
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
<div id="footer">
<div id="footer-core" class="option4">
<div id="footer-col1" class="widget-area one_fourth">
<aside class=" widget widget_text">
<div class="textwidget">
<center><a href="http://www.grosfeldvandervelde.nl" target="_blank"><h3 class="widget-title"><font color="black">Grosfeld van der Velde</font><br><font color="#dbd8c1"> architecten</font>
</h3></a>
</center>
</div>
</aside>
</div>
<div id="footer-col2" class="widget-area one_fourth">
<aside class=" widget widget_text">
<div class="textwidget">
<center><a href="http://www.rho.nl" target="_blank"><h3 class="widget-title"><font color="black">Rho </font><br><font color="#dbd8c1">adviseurs voor leefruimte</font>
</h3></a>
</center>
</div>
</aside>
</div>
<div id="footer-col3" class="widget-area one_fourth">
<aside class=" widget widget_text">
<div class="textwidget">
<center><a href="http://www.pauwert.nl" target="_blank"><h3 class="widget-title"><font color="black">Van den Pauwert </font><br><font color="#dbd8c1">architecten</font>
</h3></a>
</center>
</div>
</aside>
</div>
<div id="footer-col4" class="widget-area last one_fourth">
<aside class=" widget widget_text">
<div class="textwidget">
<center><a href="http://www.verkerk-erfgoed.nl" tagert="_blank"><h3 class="widget-title"><font color="black">Verkerk </font><br><font color="#dbd8c1">erfgoed<font>
</font></font></h3></a>
</center>
</div><font color="#dbd8c1"><font>
</font></font>
</aside>
</div>
</div>
</div>
<!-- #footer --><font color="#dbd8c1"><font>
<div id="sub-footer">
<div id="sub-footer-core">
<!-- #footer-menu -->
<div class="copyright">
Copyright BergTop ICT
</div>
<!-- .copyright -->
</div>
</div>
</font></font>
</footer>
edit oops i forgot to mention you need to add the class site-footer to the parent footer
Related
I have a flex div that contains two further elements. When viewed fullscreen on a desktop, one of the elements acts as a sidebar. On smaller screens, the elements collapse to be displayed one on top of the other.
This technique is explained on Every Layout.
I want to introduce a sticky element that will be used for navigation. On a wide screen, it works as expected. I can scroll the page and the sitcky element sticks to the top. However, in a narrower window, the element does not stick. It scrolls out of view – the same in both Safari and Firefox.
.with-sidebar {
display: flex;
flex-wrap: wrap;
}
.with-sidebar > :first-child {
flex-basis: 20rem;
flex-grow: 1;
background-color: green;
}
.with-sidebar > :last-child {
flex-grow: 999;
min-inline-size: 50%;
background-color: red;
}
.sticky {
position: sticky;
top: 1rem;
}
<div class="with-sidebar">
<div>
<h1>Sidebar</h1>
<div style="height:10rem">Spacer</div>
<div class="sticky">
<h1>Sticky Element</h1>
</div>
</div>
<div>
<h1>Not Sidebar</h1>
<div style="height:200rem">Spacer</div>
</div>
</div>
Among other things, I have tried wrapping the sticky inside another element, tried applying align-self: flex-start; to the sticky. I haven't yet found anything that works.
How can I ensure that the element is sticky when the sidebar and not-sidebar are stacked vertically as well as when they are alongside each other?
Update
I have experimented with placing .with-sidebar within a taller wrapper. Now it is clear what is happening. The element which is not the sidebar is pushing the sticky element off screen. This never happens when the elements are side by side. But, in a smaller window, the not-sidebar element is directly beneath the sticky element.
<div style="height: 400rem">
<div class="with-sidebar">
<div>
<h1>Sidebar</h1>
<div style="height:10rem">Spacer</div>
<div class="sticky">
<h1>Sticky Element</h1>
</div>
</div>
<div>
<h1>Not Sidebar</h1>
<div style="height:60rem">Spacer</div>
</div>
</div>
</div>
I think it's better to redo the markup (or design). See, for example, if you specify a height for a block, in which the "sticky element" is located, div:has(.sticky) { height: 500px; } then the element starts to "stick a little", or another example, change nesting
<body>
<div class="with-sidebar">
<div>
<h1>Sidebar</h1>
<div style="height: 10rem">Spacer</div>
<!-- <div class="sticky">
<h1>Sticky Element</h1>
</div> -->
</div>
<div class="sticky">
<h1>Sticky Element</h1>
</div>
<div>
<h1>Not Sidebar</h1>
<div style="height: 200rem">Spacer</div>
</div>
</div>
</body>
and add a property align-self for this element.
.sticky {
position: sticky;
top: 1rem;
align-self: flex-start;
}
But I don't think that's all for you. This is just an examples so you can see how the element works. The specification CSS Positioned Layout Module Level 3 very briefly describes the behavior of elements when positioned sticky.
Use media queries for top position if 10rem is not as you want...
.sticky {
position: fixed;
top: 10rem;
}
Update: I clarify my thoughts:
<div class="with-sidebar">
<div>
<h1>Sidebar</h1>
<div style="height:10rem">Spacer</div>
<div class="sticky_desktop">
<h1>Sticky Element</h1>
</div>
</div>
<div>
<div class="sticky_mobile">
<h1>Sticky Element</h1>
</div>
<h1>Not Sidebar</h1>
<div style="height:200rem">Spacer</div>
</div>
</div>
.with-sidebar {
display: flex;
flex-wrap: wrap;
}
.with-sidebar > :first-child {
flex-basis: 20rem;
flex-grow: 1;
background-color: green;
}
.with-sidebar > :last-child {
flex-grow: 999;
min-inline-size: 50%;
background-color: red;
}
.sticky_desktop {
position: sticky;
top: 1rem;
}
.sticky_mobile {
position: sticky;
top: 1rem;
color: violet;
}
.sticky_mobile>h1{
margin-block-start: 0;
margin-block-end: 0;
}
#media screen and (min-width : 656px ){
.sticky_mobile {
display:none;
}
}
#media screen and (max-width : 655px ){
.sticky_desktop {
display:none;
}
}
Using Bootstrap 4 I'm trying to achieve an overlay effect with .png image which is also masking a part of bottom area of first section.
The height of .png image is 130px and it also should remain unscaled on mobile devices.
I've tried to use ::after pseudoelements with content as background image on first section, but this gives me a unwanted bottom margin.
See my example here: https://codepen.io/michalwyrwa/pen/EGbxXb
Is there a better way to do it?
CSS:
body {
color: #ecf0f1;
}
.welcome .col {
background-color: #3498db;
height: 50vh;
}
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
margin: 0;
padding: 0;
}
.features .col {
background-color: #6ab04c;
height: 50vh;
}
HTML:
<section class="welcome">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Welcome text</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Features</p>
</div>
</div>
</div>
</section>
I didn't find the root cause of your problem but I have the solution for you.
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
padding: 0;
margin-bottom: -6px;
}
my app.component.html code is as follows
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3'>
<nav-menu></nav-menu>
</div>
<div class='col-sm-9 body-content'>
<router-outlet></router-outlet>
</div>
</div>
<div class="row">
<footer></footer>
</div>
my footer.component.html code is:
<div class="footer">
<div class="col-sm-10">
© {{currentYear}} - UMD IP PTY LTD
</div>
<div>{{environment}}</div>
The CSS which I used to show the footer at the bottom of the page is
footer {
position: absolute;
bottom: 0;
left: 25%;
width: 75%;
height: 50px;
}
Now the issue is angular loads the data dynamically on the page. Initially footer is at the bottom of the page but when data is added to the page and the controls added at runtime on the page exceeds the initial page height my footer remains at the initial page which ends up somewhere in between the page.
How to fix this?
In the picture below controls are added dynamically using reactive form which results in footer being show between the controls.
If fixed the issue to adjust the wrapper height using the calc method mentioned on this link .
Changed the footer html to this
<div class="footer">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-7">
© {{currentYear}} - xyz IP PTY LTD
</div>
<div class="col-sm-2 text-right">{{environment}}</div>
</div>
</div>
and changed the css for the home page to below
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
and changed the home page code to this.
<div class='content'>
<div class="row">
<div class='col-sm-3'>
<nav-menu></nav-menu>
</div>
<div class='col-sm-9 body-content'>
<router-outlet></router-outlet>
</div>
</div>
</div>
<footer class="footer"></footer>
This works perfectly with Visual Studio Javascriptservices template for angular. footer adjusts itself even after adding the controls dynamically
You are using footer as class but you are declaring styles as footer which refers to tag
Replace footer to .footer
.footer {
position: absolute;
bottom: 0;
left: 25%;
width: 75%;
height: 50px;
}
I was trying to implement sticky footer with zurb foundation 5.5.3 off-canvas menu for hours and I can't figure out what's causing the error.
Sticky footer works: https://codepen.io/marko_avlijas/pen/dWBJVM
When I wrap it in off canvas menu, it doesn't: https://codepen.io/marko_avlijas/pen/vmqpey
This is minimal html and css, so this question doesn't depend on codepen.
HTML
<div class="wrapper">
<div class="content">
<h1>Sticky Footer of Unknown Height (no javascript)</h2>
<button id="button-show">Toggle Content</button>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.content {
display: table-row;
height: 100%;
/* ...as content is added (won't scroll) */
}
.footer {
display: table-row;
}
Broken HTML
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- This part is same like before -->
<div class="wrapper">
<div class="content">
<h1>Sticky Footer Broken!!!</h2>
<button id="button-show">Toggle Content</button>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
</div>
</div>
You need to add:
.off-canvas-wrap, .inner-wrap {height:100%;}
When you are using 100% height, the parent needs to have a fixed height... or if still want it 100%, all parents till htmlneeds 100% to make it work.
I am trying to design a simple ecommerce website, in that my footer tag text is displayed right beside the section tag. I have no idea where I am doing wrong.
HTML
<aside id="categories">
<header id="headings" class="background_div">Categories</header>
<nav>
<ul>
<li>Staples</li>
<li>Oils</li>
<li>Vegetables</li>
<li>Fruits</li>
</ul>
</nav>
</aside>
<div id="bestsellers">
<header id="headings" class="background_div">Bestsellers</header>
<article class="productarticle">
<figure>
<img src="faded-short-sleeve-tshirts.jpg" alt="cabbage"/>
</figure>
<div class="align_text">
<header id="headings">
<span class="productarticlename">Cabbage 1</span>
</header>
<p class="productprice">$10</p>
<div class="addtocart">
Add to Cart
</div>
</div>
</article>
<!-- 4 More Article Tags will be included here -->
</div>
</section>
<footer>
<div clas="heading">This is footer text</div>
</footer>
CSS
#content{
width: 100% px;
display: block;
}
.carousel_img{
width: 1000px;
}
#headings{
font-weight: bold;
}
#categories{
float: left;
}
#bestsellers{
float: left;
margin-left: 25px;
margin-right: 0 px;
width: 80%;
height: 100%;
margin-bottom: 20 px;
}
.background_div{
background: lightgreen;
}
.productarticle{
float: left;
}
.align_text{
text-align: center;
}
Please help me. I want the content in section tag and the text in footer tag to be displayed in seperate lines.
JS-FIDDLE DEMO
See this fiddle
Since your #content contains of floated elements, you also need to float the #content div. Thus add a float:left; to #content.
Now to clear this float effect from the footer, you need to add clear:both; to your footer CSS. Thus the changed CSS would be like
#content{
width: 100% px;
display: block;
float:left;
}
footer{
clear:both;
}