1

I've been using a template from startbootstrap to get something done.. I want the page content wrapper to be a solid color, but i can't get it to stay 100% height of the window even went adding more text into the div it will only stay pink a certain height and not continue.

I've tried some fixes etc, but when i do certain things, then the footer doesn't stay at the bottom (not fixed ) absolute .. it moves up .

white space doesn't fill footer moves up

I have included a jsdiffle link.. stretch the preview window to make it look more like desktop size than mobile.

html {
position: relative;
height: 100%;
min-height: 100%;
}

JSFIDDLE Example

op1001
  • 348
  • 2
  • 8
  • 15

3 Answers3

1

Change the position to relative in every place except for .side-menu so you can get the footer to bottom. Check the css file in my code snippet. 

/*!
 * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
 */

@import url('//netdna.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
html {
  position: relative;
  height: 100%;
  min-height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 4rem;
  min-height: 100%;
}

#wrapper {
  padding-left: 0;
  -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 {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  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 #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: relative;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: relative;
  margin-right: -250px;
}


/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
  color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}

@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 250px;
  }
  #sidebar-wrapper {
    width: 250px;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 250px;
  }
  #page-content-wrapper {
    padding: 20px;
    background-color: pink;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
  .footer {
   position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
  text-align: center;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Simple Sidebar - Start Bootstrap Template</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/simple-sidebar.css" rel="stylesheet">

</head>

<body>

  <div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand">
          <a href="#">
                        Start Bootstrap
                    </a>
        </li>
        <li>
          <a href="#">Dashboard</a>
        </li>
        <li>
          <a href="#">Shortcuts</a>
        </li>
        <li>
          <a href="#">Overview</a>
        </li>
        <li>
          <a href="#">Events</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <h1>Simple Sidebar</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>
        <h1>Simple Sidebar</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>
        <h1>Simple Sidebar</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>
        <h1>Simple Sidebar</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>
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
        <h1>Simple Sidebar</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>
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
        <h1>Simple Sidebar</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>
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
        <h1>Simple Sidebar</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>
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
        <h1>Simple Sidebar</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 -->
    <footer class="footer">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>
  </div>
  <!-- /#wrapper -->



</body>

</html>
Lakindu Gunasekara
  • 4,221
  • 4
  • 27
  • 41
  • what this does is , it sticks the footer to the wrapper, so if the content isn't long enough it leaves a big white space. https://imgur.com/a/OnbLp – op1001 Mar 12 '18 at 15:18
  • @op1001 https://imgur.com/a/p4TBX this is what you want to achieve right? Check the image – Lakindu Gunasekara Mar 12 '18 at 15:24
  • it is sticking to the wrapper or any other content which is added to the bottom. If another section is added after wrapper, you need to give position:relative; so that it will also added up. And won't be there any white spaces or getting too short. Footer in the answer adjusts to the content above, not given any fixed height. Hope this is what you expect – Lakindu Gunasekara Mar 12 '18 at 15:41
  • like the picture you posted, exactly.. what happens though is the page content doesn't fill 100% of the height so there will always be white space or whatever. i want the footer to move with the content , but if there is not enough content that footer stays at the bottom . but if there is a big essay the footer will be at the bottom – op1001 Mar 12 '18 at 15:50
  • https://stackoverflow.com/questions/12239166/footer-at-bottom-of-page-or-content-whichever-is-lower check this one – Lakindu Gunasekara Mar 12 '18 at 15:58
  • @op1001 I have edited the answer. added some styling to the body css and changed the footer – Lakindu Gunasekara Mar 12 '18 at 16:21
  • hey Lakindu, the flexbox version is exactly what i want. now i just gotta figure how to add it to that template. i tried but it looks funny lol – op1001 Mar 12 '18 at 16:22
  • 1
    I have done some changes to body and footer css files. Check that and see. There is a small alignment issue with the text in the footer, but you can adjust it by using some margin-left over there :D ... And i checked the footer with and without content as well. If this helps you, appreciate for an upvote – Lakindu Gunasekara Mar 12 '18 at 16:24
  • @op1001 any progress ? – Lakindu Gunasekara Mar 13 '18 at 03:03
  • I figured it out using flex like the example you gave me, works like a charm. though i accepted your solution as well as that somewhat worked as i wanted, thanks – op1001 Mar 14 '18 at 00:32
0

change your footer position from absolute to relative in your style sheet

 .footer {

 position: relative;
  }
Saranya Rajendran
  • 689
  • 8
  • 19
0

Change footer class position to fixed and add the footer class height as padding to your container class (container-fluid) 

.footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 60px;
      line-height: 60px; /* Vertically center the text there */
      background-color: #f5f5f5;
    }
    .container-fluid
    {
      padding-bottom:60px;
    }

https://jsfiddle.net/pcawynk0/1/

Nivethi Mathan
  • 105
  • 1
  • 8
  • What i want is, the footer to be at the bottom but not fixed.. I want it to move with content. but if there isn't enough content in the wrapper that it will be at the bottom of the screen https://imgur.com/qk8dwZ6 - but with that, the wrapper doesn't go down to 100% height. i've tried so many things i can't figure it out lol – op1001 Mar 12 '18 at 15:22