Achtergrond doorlopen tot footer

Status
Niet open voor verdere reacties.
Dank je Bron voor reageren. Daarop zoekend kwam ik snel bij deze site waarbij sticky footer goed werkt.
Alleen... nog steeds probleem dat daarmee achtergrond niet doorloopt. Hoe zou ik dat kunnen oplossen? Gaat dat bijv. lukken met faux-columns (1px hoog en dan breed plaatje) maar dan op de body?
 
Het voorbeeld op die site heb ik al geprobeerd. Werkt niet.
Ook het comment onderaan (met de resize) werkt niet goed.
Dit is het beste concept wat ik heb gevonden en heb aangepast.
Code: 
HTML:

<body>
<header id="header">
  <div class="inner responsive">
  <h2>Dit is de header</h2>
  </div>
</header>
<section id="main">
  <div id="content" class="responsive">
    <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</section>
<footer id="footer">
  <div class="inner responsive">
  <h2>Dit is de footer</h2>
  </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>

CSS:

/* simpele reset */
html, body, body * {
  margin: 0; padding: 0; font-family: verdana, sans-serif;
}
header, nav, section, footer {
  display: block;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
/* sticky (noscroll, main en content nodig in javascript) */
.noscroll {
  overflow: hidden;
  overflow-y: hidden;
}
#header, #main, #content, #footer {
  margin: 0;
  padding: 0;
}
/* responsive */
.responsive {
  width: auto;
  margin: 0 auto !important;
}
@media (min-width: 768px) {
  .responsive { width: 750px; }
}
@media (min-width: 992px) {
  .responsive { width: 970px; }
}
@media (min-width: 1200px) {
  .responsive { width: 1170px; }
}
/* achtergrond (geen margin, padding, border) */
#header  { background: #9af; }
#main    { background: #af9; }
#content { background: #fff; }
#footer  { background: #f9a; }
/* opmaak (op inner of elementen in inner) */
.inner {
  padding: 15px;
}
#content .inner {
  color: #33a;
}

JS (main.js):

$(document).ready(function(){
   var dheight = $('body').height(),
        mheight = $('#main').height(),
        wheight = $(window).height(),
        cheight = wheight - dheight + mheight;
   if (wheight > dheight){
      $('#main,#content').height(cheight);
   }
   $(window).resize(function(){
      wheight = $(window).height();
      noscroll();
      changepush();
   });
   function noscroll(){
      if (wheight > dheight) {
         $('html').addClass('noscroll');
      } else if (wheight <= dheight) {
         $('html').removeClass('noscroll');
      } else {
      }
   }
   function changepush(){
      if (wheight > dheight) {
         $('#main,#content').height(wheight-dheight+mheight);
      }
   }
});

Suc6.

*** edit: nadeel is dat de footer niet wordt goedgezet als je de browser smaller maakt.
 
Laatst bewerkt:
Ziet er netjes uit Bron! Heb er een jsfiddle van gemaakt en doet het goed.
Ga hem proberen in de structuur van het starter thema underscores wat ik gebruik zetten. Dank je! :thumb:
 
Ik heb zelf ook een plakkerige footer nodig. Omdat in mijn oplossing bij #22 wat onvolkomenheden zaten heb ik de JS anders gemaakt zodat de layout sneller wordt aangepast bij een resize en je kunt nu horizontaal én verticaal resizen zonder knipperige neveneffecten.
Code: 
Dit weghalen uit de css van #22:

/* sticky (noscroll, main en content nodig in javascript) */
.noscroll {
  overflow: hidden;
  overflow-y: hidden;
}

en dit is de nieuwe JS:

$(document).ready(function(){

	// selector van de content
	var main = $('#content');

	// selector van de overige delen
	var head = $('#header');
	var foot = $('#footer');
	//var menu = $('#menu');

	// totale hoogte van de overige delen; zonder de content
	var corrH = head.outerHeight() + foot.outerHeight(); //+ menu.outerHeight()

	// Event Listener -- e(lement), t(ype), h(andle)
	var addEvent = function(e,t,h) {
		if (e.addEventListener) e.addEventListener(t,h,false); //w3c
		else e.attachEvent('on'+t,h); //ie8-,opera7-
	};
	addEvent(window, 'resize', setMainHeight);

	// bereken contenthoogte en zet dit in de css als min-height
	var viewH, mainH;
	function setMainHeight(){
		main.css({'min-height': ''});
		viewH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
		mainH = main.outerHeight();
		if (mainH+corrH < viewH) main.css({'min-height': viewH-corrH+'px'});
	}
	setMainHeight();

});

Suc6.
 
Laatst bewerkt:
Dank je Bron! Het lag een paar dagen even stil maar kan het gauw gaan testen.
 
Ik ben ook nog bezig om de orientationchange erin te zetten maar hiervoor moet ik de beste manier nog uitzoeken om dit cross platform (ios, android, enz) te krijgen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan