Skip to content Skip to sidebar Skip to footer
Home / Asp.net / Css / Html / Webforms

Fixed Action Bar, Taking Footer Into Account

Post a Comment
I've been trying to get an 'action bar' to appear on my web application using position fixed. This action bar will contain various buttons relevant to the active form, and should a

Solution 1:

Using the suggestion by Morpheus in the questions comments, I'm going to use position sticky. As the user has stated, it isn't well supported so what I've done is first set the action bar to relative, and then to sticky so there is always a fallback. 

* {
  margin: 0;
  color: white;
  font-size: 20px;
}

.example-header {
  display: block;
  width: 100%;
  height: 80px;
  background-color: red;
  
}

.example-inner-body {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: blue;
}

.example-inner-body span {
  position: absolute;
  bottom: 0;
  left: 0;
}

.action-bar {
  display: block;
  position: relative;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 35px;
  background-color: rgba(0,0,0,0.7);
  
}

footer {
  display: block;
  width: 100%;
  height: 40px;
  background-color: yellow;
  color: black;
}
<!DOCTYPE html> 
<html> 
  <head> 
  <title>Page Title</title> 
  </head> 
  <body> 
    <div class="example-header">Header</div>
    <div class="example-inner-body">iBody
    <span></span>
    </div>
    <div class="action-bar">Action Bar</div>
    <footer>Footer - Do not cover me! </footer>
  </body> 
</html>

Post a Comment for "Fixed Action Bar, Taking Footer Into Account"