A small amount of content - footer is on top -Bootstrap

Hey guys.

The main problem is footer, that go to middle of page if there are no enought content.So I want to put it down.
I had the same problem, few times ago but I fixed it, by setting the fixed height to footer, and then do absolute position and all work well.

When I tried to do same I got this issue (see the image)

So as you see, the footer goes over content.

This is my markup.

<nav class="navbar">
	<div class="container">
		<!--Just simple Bootstrap navigation, nothing special-->
	</div>
</nav>

<main class="main-content" role="main">
	<section class="main-section">
		<div class="container">
			<div class="row">
				<div class="col-lg-4">
					<img src="img/pro-image.jpg" alt="Image" class="img-responsive mt20">
				</div>
				<div class="col-lg-8">
					<h2>Heading 2</h2>
					<p>
						Farm-to-table asymmetrical portland minim ex iPhone ut vinyl, id everyday carry.
						Roof party enim cronut exercitation. Meggings eu crucifix gluten-free thundercats.
						Keffiyeh voluptate accusamus nihil skateboard magna sint, tofu tumblr affogato
						next level pabst actually exercitation. Pour-over cornhole ea, roof party stumptown
						minim incididunt 8-bit next level anim helvetica. DIY hashtag green juice, craft beer
						cardigan aesthetic church-key exercitation hammock plaid everyday carry sartorial
						lomo. Disrupt actually dolore etsy, mlkshk man braid whatever intelligentsia keffiyeh
						forage.
					</p>
					<p>
						Incididunt cronut asymmetrical freegan vero direct trade. Shabby chic drinking
						vinegar meggings banh mi, schlitz freegan portland pinterest butcher occupy.
						Adipisicing disrupt man bun artisan, duis nulla cupidatat. Dolore taxidermy keytar
						id, elit retro iPhone cold-pressed gluten-free freegan umami et tousled helvetica
						XOXO. Plaid schlitz mustache cronut, mumblecore gastropub ea.	
					</p>
				</div>
			</div>
		</div>
	</section>
</main>

<footer class="footer">
	<div class="special-info-footer">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<span>This place is for special info and it only appear when it's not empty.</span>
				</div>
			</div>
		</div>
	</div>
	<div class="main-footer">
		<div class="container">
			<div class="row">
				<div class="col-lg-9">
					<!-- ...text -->
				</div>
				<div class="col-lg-3">
					<!-- ...text -->
				</div>
			</div>
		</div>
	</div>
</footer>

.footer {
	position: absolute;
	width: 100%;
	height: 204px;
	bottom: 0;
}

There are no nothing special about CSS, just color rules, and some margins and paddings.

Any idea ?

Thanks

One more screenshot:

Hi,

You can’t use absolute positioning for a sticky footer in a responsive site. In any case an absolute footer would need to be inside a 100% (min-height) page wrapper and protected with padding to stop content running over the top.

You didn’t give a link to your site so I can’t offer a solution but I can show you how its done properly and in a responsible and responsive way.:slight_smile:

Take a look at this codepen which shows the exact way to make a sticky footer and all that needs to be in place for it to work. Your layout would need to go inside the main section (with the header inside the header section).

These days you can use flexbox to create a sticky footer also but again you need this set up correctly to start with.

Here’s a rough guide of how your code should look.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
html, body, #wrap {
	margin:0;
	padding:0;
	height:100%;
}
#wrap {
	display:table;
	width:100%
}
/* if ie7 support is needed then set height of #wrap and header and footer to auto in CC's and just let it have a normal layout (or: *+html #wrap{height:auto})*/
.header, .stickyfooter, .content {
	display:block
}/* ie7 and under*/
.header, .stickyfooter, .content {
	display:table-row
}
/* height 1px on the header and footer is the sticky footer technique */
.header, .stickyfooter {
	height:1px
}
</style>
</head>
<body>
<div id="wrap">
  <header class="header">
    <nav class="navbar">
      <div class="container"> navbar 
        <!--Just simple Bootstrap navigation, nothing special--> 
      </div>
    </nav>
  </header>
  <div class="content">
    <main class="main-content" role="main">
      <section class="main-section">
        <div class="container">
          <div class="row">
            <div class="col-lg-4"> <img src="img/pro-image.jpg" alt="Image" class="img-responsive mt20"> </div>
            <div class="col-lg-8">
              <h2>Heading 2</h2>
              <p> Farm-to-table asymmetrical portland minim ex iPhone ut vinyl, id everyday carry.
                Roof party enim cronut exercitation. Meggings eu crucifix gluten-free thundercats.
                Keffiyeh voluptate accusamus nihil skateboard magna sint, tofu tumblr affogato
                next level pabst actually exercitation. Pour-over cornhole ea, roof party stumptown
                minim incididunt 8-bit next level anim helvetica. DIY hashtag green juice, craft beer
                cardigan aesthetic church-key exercitation hammock plaid everyday carry sartorial
                lomo. Disrupt actually dolore etsy, mlkshk man braid whatever intelligentsia keffiyeh
                forage. </p>
              <p> Incididunt cronut asymmetrical freegan vero direct trade. Shabby chic drinking
                vinegar meggings banh mi, schlitz freegan portland pinterest butcher occupy.
                Adipisicing disrupt man bun artisan, duis nulla cupidatat. Dolore taxidermy keytar
                id, elit retro iPhone cold-pressed gluten-free freegan umami et tousled helvetica
                XOXO. Plaid schlitz mustache cronut, mumblecore gastropub ea. </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
  <div class="stickyfooter">
    <footer class="footer">
      <div class="special-info-footer">
        <div class="container">
          <div class="row">
            <div class="col-lg-12"> <span>This place is for special info and it only appear when it's not empty.</span> </div>
          </div>
        </div>
      </div>
      <div class="main-footer">
        <div class="container">
          <div class="row">
            <div class="col-lg-9"> 
              <!-- ...text --> 
            </div>
            <div class="col-lg-3"> 
              <!-- ...text --> 
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</div>
</body>
</html>
2 Likes

Thanks, solution with flex works perfect :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.