logo
Tags down

shadow

div position fixed css


By : A M SHIVRAJ
Date : May 07 2020, 09:59 AM

I unable to get my footer fixed to screen. Meaning when the page is viewed I would like to see footer at all times. I have tried position(fixed, absolute) but have been unable to solve. I have searched the web, but I still having difficulty getting to stay at bottom of screen thanks in advance for any help

I have tried : position: fixed and position: absolute

.bo-wrap {
  clear: both;
  width: auto;
}

.bo-footer {
  clear: both;
  width: auto;
  padding: 5px;
  margin: 0 auto;
  width: 960px;
  height: 25px;
}

.bo-footer-social {
  text-align: center;
  line-height: 1px;
}

.bo-footer-smap {
  width: 300px;
  float: left;
  padding: 5px 10px;
  text-align: left;
  font-size: 18px;
}

.bo-footer-uonline {
  width: 300px;
  /* Account for margins + border values */
  float: left;
  padding: 5px 10px;
  text-align: center;
}

.bo-footer-power {
  width: 300px;
  padding: 5px 10px;
  float: left;
  text-align: right;
  font-size: 14px;
  color: #636A7D;
  vertical-align: middle;
}

.bo-footer-copyright {
  text-align: center;
  color: #BDC3CF
}
<div class="bo-wrap clr4">
  <div class="bo-footer">
    <div class="bo-footer-social"></div>
  </div>
</div>
<div class="bo-wrap clr3">
  <div class="bo-footer">
    <div class="bo-footer-smap">
      <a href="http://www.bangalionline.com/sitemap.php">Sitemap</a> | <a href="http://www.bangalionline.com/terms.php">Policy</a> | <a href="http://www.bangalionline.com/contact.php">Contact Us</a>
    </div>
    <div class="bo-footer-uonline">
      <script id="_wautoy">
        var _wau = _wau || [];
        _wau.push(["small", "p6egqc1t5bze", "toy"]);
        (function() {
          var s = document.createElement("script");
          s.async = true;
          s.src = "http://widgets.amung.us/small.js";
          document.getElementsByTagName("head")[0].appendChild(s);
        })();
      </script>
    </div>
    <div class="bo-footer-power">
      Powered By JK - <a href="http://www.jobaerulkaes.com/">Web &amp Apps Developer</a>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
<div class="bo-wrap clr4">
  <div class="bo-footer">
    <div class="bo-footer-copyright">&copy;2019 Timeless Consignment All rights reserved.</div>
  </div>
</div>

Answer :

I wrapped three footer div, class = wrapper, footer-wrapper

   <div class="wrapper footer-wrapper">
    <div class="bo-wrap clr4">
      <div class="bo-footer">
        <div class="bo-footer-social"></div>
      </div>
    </div>
    <div class="bo-wrap clr3">
      <div class="bo-footer">
        <div class="bo-footer-smap">
          <a href="http://www.bangalionline.com/sitemap.php">Sitemap</a> | <a
            href="http://www.bangalionline.com/terms.php">Policy</a> | <a
            href="http://www.bangalionline.com/contact.php">Contact Us</a>
        </div>
        <div class="bo-footer-uonline">
          <script id="_wautoy">var _wau = _wau || []; _wau.push(["small", "p6egqc1t5bze", "toy"]);
            (function () {
              var s = document.createElement("script"); s.async = true;
              s.src = "http://widgets.amung.us/small.js";
              document.getElementsByTagName("head")[0].appendChild(s);
            })();</script>
        </div>
        <div class="bo-footer-power">
          Powered By JK - <a href="http://www.jobaerulkaes.com/">Web &amp Apps Developer</a>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="bo-wrap clr4">
      <div class="bo-footer">
        <div class="bo-footer-copyright">&copy;2019 Timeless Consignment All rights reserved.</div>
      </div>
    </div>
</div>

Then I styled the wrapper position absolute, width 100% and bottom set to 0:

.wrapper.footer-wrapper{
 position: absolute;
 width: 100%;
 bottom: 0;
}



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • insert line after paragraph word
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org