页脚不要用侧边栏更改大小

Question

So... I have a problem with the "position" property of my footer.

footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}

This draw my footer on the very bottom of the page if the content is big or in the bottom of the screen if the content is small, which is what I want, but it also is inside a .wrapper div, which if opened, change the size of everything making it smaller ('cause of the sidebar now is occupying part of the screen), the thing is... How do I make my footer draw on the bottom of the page/screen and also respect the size change?

I already did tests changing the position: absolute; property and with the others values of position it does the size change but it don't stay at the bottom.

Sidebar: https://startbootstrap.com/template-overviews/simple-sidebar

Thanks for your patience!

Answer 1

This feel hacky, but I tried to do it without any js on the demo page of simple-sidebar. Inside the "page-content-wrapper" div, at the same level of the "container-fluid" div of the content I added

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-left: -20px;
  z-index: 3;
}

It seems that if you use left:0 the sidebar goes over the position on 20px.

I feel that to really get a nice solution you should use JS to resize your footer at the same time you toogle the sidebar.

Hope that it helped

Answer 2

So this is my intepretation of your question:

What you need to do to get your footer to stick to the bottom is basically change all the padding-left etc. properties to the bottom fixed footer equivalent.

Also, since you want a bottom variant, I assumed that you still want to be able to view all the content on the page if the bar is toggled (the example hides the content that is shifted outside the window to the right). To achieve this, the page-content needs position: relative .

---

More comments can be found in the snippet below.

Hope it helped :)

 //Simulate JS from the sample site document.getElementById("menu-toggle").addEventListener("click", function(){ document.getElementById("wrapper").classList.toggle("toggled"); }) // Remove annoying margin from example box *Ignore* this for personal use document.body.style.margin = "0px"; 

 #wrapper { margin: 0; padding-bottom: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; font-family: monospace; /* Always choose a nice font ;) */ } #wrapper.toggled { padding-bottom: 60px; /* Create a space for the footer at the bottom of the page */ } #footer-wrapper { z-index: 1000; position: fixed; bottom: 60px; /* Offset from bottom */ left: 0; width: 100%; height: 0px; /* Height for the footer */ margin-bottom: -60px; /* Initially hide the footer */ overflow: hidden; /* Just for the example */ background: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #footer-wrapper { height: 60px; /* when toggled, make the footer visible */ } #page-content-wrapper { width: 90%; position: relative; padding: 5%; } #wrapper.toggled #page-content-wrapper { position: relative; /* make relative to keep seeing the page content */ margin-top: -60px; /* Move content up by 60px*/ padding-top: 60px; /* Make sure no content is hidden from page*/ } /* Responsive Styles */ @media(min-width:768px) { #wrapper { padding-bottom: 0; } #wrapper.toggled { padding-bottom: 60px; } #footer-wrapper { height: 0px; } #wrapper.toggled #footer-wrapper { height: 60px; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-top: 0; } } 

 <div id="wrapper"> <!-- Footer --> <div id="footer-wrapper"> <h1 style=" color: white; ">They see me going, they hatin'</h1> </div> <!-- /#footer-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <div class="container-fluid"> <h2>Simple Footer</h1> <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a> </div> </div> <!-- /#page-content-wrapper --> </div>