Databases
StackOverflow2013
Postsdbo
POExtend div all the way to bottom without scrollbar
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExtend div all the way to bottom without scrollbar
    text
    copied!<p>i've got a problem where I can't seem to extend a div all the way to the bottom. I've looked here on stackoverflow and found some topics about it and tried it out but it doesn't work 100%, it always creates a scrollbar also.</p> <p>I'm using Twitter Bootstrap for my project btw.</p> <p>HTML: </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Divespotter&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta name="description" content=""&gt; &lt;meta name="author" content=""&gt; &lt;!-- Fonts --&gt; &lt;link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'&gt; &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt; &lt;!-- Le styles --&gt; &lt;link href="css/bootstrap.css" rel="stylesheet"&gt; &lt;style&gt; body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } &lt;/style&gt; &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt; &lt;link href="css/style.css" rel="stylesheet"&gt; &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt; &lt;!--[if lt IE 9]&gt; &lt;script src="../assets/js/html5shiv.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;!-- Fav and touch icons --&gt; &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"&gt; &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"&gt; &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"&gt; &lt;link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"&gt; &lt;link rel="shortcut icon" href="../assets/ico/favicon.png"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt; &lt;div class="navbar-inner"&gt; &lt;div class="container"&gt; &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;a class="brand" href="#"&gt;DIVESPOTTER&lt;/a&gt; &lt;div class="nav-collapse collapse"&gt; &lt;ul class="nav"&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;ONTDEK&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#about"&gt;GALLERIJ&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact"&gt;FORUM&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact"&gt;BLOG&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/.nav-collapse --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="maincontent"&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="span6"&gt; &lt;p class="title"&gt;Hét digitaal logboekje.&lt;/p&gt; &lt;p class="intro"&gt;Het logboek is een belangrijk onderdeel voor dé beste duikervaring. Divespotter helpt u deze ervaringen nooit meer zal vergeten.&lt;/p&gt; &lt;p class="register"&gt;&lt;a href="#" &gt;REGISTREER NU!&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class="span6"&gt; &lt;div id="myCarousel" class="carousel slide"&gt; &lt;ol class="carousel-indicators"&gt; &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt; &lt;/ol&gt; &lt;!-- Carousel items --&gt; &lt;div class="carousel-inner"&gt; &lt;div class="active item"&gt; &lt;img src="img/afb1.jpg"/&gt; &lt;div class="carousel-caption"&gt; Eerste afbeelding &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="img/afb2.jpg"/&gt; &lt;div class="carousel-caption"&gt; Tweede afbeelding &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="img/afb3.jpg"/&gt; &lt;div class="carousel-caption"&gt; Derde afbeelding &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Carousel nav --&gt; &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt; &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="footer"&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="span4"&gt; &lt;p&gt;Log&lt;/p&gt; &lt;p&gt;Leg al je duikervaringen vast zodat je er later terug van kan genieten precies of je erbij bent.&lt;/p&gt; &lt;/div&gt; &lt;div class="span4"&gt; &lt;p&gt;Ontdek&lt;/p&gt; &lt;p&gt;Ontdek nieuwe duiklocaties, leer van mededuikgenoten en bekijk foto’s van andere duikers over de hele wereld.&lt;/p&gt; &lt;/div&gt; &lt;div class="span4"&gt; &lt;p&gt;Deel&lt;/p&gt; &lt;p&gt;Deel al je duikervaringen en foto’s met je vrienden op Facebook, Twitter, ...&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;!-- Le javascript ================================================== --&gt; &lt;!-- Placed at the end of the document so the pages load faster --&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-transition.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-alert.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-modal.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-dropdown.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-scrollspy.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-tab.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-tooltip.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-popover.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-button.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-collapse.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-carousel.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-typeahead.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>within the style.css:</p> <pre><code>html, body { height: 100%;} body { font-family: 'Montserrat'; font-weight: bold; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .navbar .brand { color: #232222; font-size: 25px; margin-right: 20%; } .navbar-inverse .navbar-inner { border: 0; box-shadow: none; } .navbar-inverse .brand { color: #232323; } .navbar-inverse .nav &gt; li &gt; a{ color: #232323; font-size: 15px; } .navbar-inverse .nav .active &gt; a, .navbar-inverse .nav .active &gt; a:hover, .navbar-inverse .nav .active &gt; a:focus { background-color: #fff; -webkit-box-shadow: none; box-shadow: none; } .maincontent { width: 100%; background-color: #6eb3d2; .container { padding-top: 2%; } } .title { padding-top: 5%; color: #313131; /* text color + color overlay */ font-family: "Montserrat"; font-size: 41px; font-weight: bold; } .intro { width: 70%; padding-top: 5%; color: #232222; /* text color + color overlay */ font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: normal; } .footer { background-color: #232323; height: 100%; width:100%; p { color: #fff; } } .register { margin-top: 6%; a { padding: 10px; color: #f6f6f6; // text color + color overlay font-family: "Montserrat"; font-size: 16px; font-weight: bold; width: 242px; height: 61px; background-color: #1f7f5b; /* layer fill content + color overlay */ } a:hover { text-decoration: none; background-color: #232323; } } </code></pre> <p>EDIT: I want the .footer vertically expanded Jsfiddle: <a href="http://jsfiddle.net/MckJB/" rel="nofollow">http://jsfiddle.net/MckJB/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload