Achtergrond doorlopen tot footer

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Bij de site waar de sticky footer goed werkt krijg ik het doorlopen van de pagina achtergrond niet voor mekaar.
Voorbeeld website: zie deze site

Meestal zet ik een background image erbij maar door de html structuur werkt dat nu niet of ik weet niet hoe ik dat moet doen ;)
Ik ben al met min-height en zo bezig maar de juiste oplossing vind ik niet.

Tips zijn welkom! :thumb:
 
Hoi damnsharp,
Deze vraag, samen met je vorige vraag, kun je zo (responsive) in orde krijgen.
Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>onze nieuwe bidons | Phassion</title>
<style type="text/css">
html, html * { /*simpele reset*/
   margin: 0; padding: 0;
}
html, body, .container { /*benodigde hoogte*/
   width: 100%; height: 100%;
}
.container { /*table met background*/
   display: table; max-width: 800px;
   margin-left: auto; margin-right: auto;
   background-color: #ff0;
}
.row { /*hier geen styling, doe dit bij inner*/
   display: table-row; min-height: 1px;
}
.full-height { /*hoogte van content tussen header en footer*/
   height: 100%;
}
.row > .inner { /*styling algemeen*/
   font: normal 125% sans-serif; color: blue;
}
header.row > .inner, footer.row > .inner {/*styling per onderdeel*/
   background-color: #0ff;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
   <header class="row">
      <div class="inner">
         <p>Header</p>
      </div>
   </header>
   <section class="row full-height">
      <div class="inner">
         <p>Content</p>
      </div>
   </section>
   <footer class="row">
      <div class="inner">
         <p>Footer</p>
      </div>
   </footer>
</div>
</body>
</html>
Ik ben uitgegaan van je vorige vraag met table-row.
Begin met de bovenste 7 regels, daarna de rest in je head.
Zet de regels tussen [if lt IE 9] altijd direct na je styling.
Let erop dat je door margin, padding of border niet buiten .inner komt.
Maak altijd eerst de hoofdstructuur met wat background kleurtjes.

Suc6.
 
Laatst bewerkt:
Dank je Bron voor reageren! Fijn hoor.
Ik ga naar je oplossing kijken en vooral bekijken hoe ik het binnen het CMS kan implementeren. Maar dat komt vast goed.
En vooral je table-row goed uitzoeken want zo op het 1e oog snap ik dat niet.
Kortom, ik kom er later op terug maar wilde gauw reageren.
 
Ik zag in je site dat je [if IE 8] nog gebruikt (?) Dit geeft veel extra werk om html5 + css3 features in IE8 werkend te krijgen. Lastiger is het compatibilteit gezeur met IE9 (en in IE10). Het script hieronder geeft een <html class="ie.."> tag. Je kunt kiezen uit de PHP of JS versie. Werkt in IE7+ . Dan kun je die hacks uit regel 2 t/m 7 weghalen.
Code: 
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
$pt = strpos(strtolower($ua), 'trident/');
$ie = ($pt !== false) ? 'class="ie' . (INT)(substr($ua, $pt +8, 3) +4) . '"' : '';
?>
<!DOCTYPE html>
<html <?php echo($ie) ?> lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>IE browser</title>
</head>
<body>

<div class="je-hele-pagina">
</div>

<script>
function fnIEversion() {
  var ua = navigator.userAgent.toLowerCase();
  var pt = ua.indexOf('trident/');
  var ie = (pt != -1) ? parseInt( ua.substr(pt + 8, 3) ) +4 : -1;
  var ht = document.getElementsByTagName('html')[0];
  if ( ie != -1 ) ht.className += ' ie' + ie;
}
var DOMReady = function(a,b,c){
  b=document,c='addEventListener';
  b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)
}
DOMReady(function() {
  fnIEversion();
});
</script>
</body>
</html>
Het script is gebaseerd op de Trident versie die vanaf IE7 in de header staat.
http://nl.wikipedia.org/wiki/Trident_(layout-engine)
Net als de [if IE 8] feature is het onbekend of de Trident versie future proof is. Met msie weet je het nooit...

Suc6.

*** edit: werken met modernizr.js is netter.
Dit script maakt de overgang van ie8 (css2), naar ie9 (css3 met bugs), naar ie10 wat makkelijker.
 
Laatst bewerkt:
Ha Bron, bedankt voor meedenken. Ik gebruik een kaal starter thema en dat is inderdaad wel wat oud. Vandaar sommige code wat wel gedateerd als ik jou goed begrijp. Ga ik aanpassen, goede tips geef je.

Verder, ik loop al snel tegen een html structuur probleem aan.
De header evenals de footer zijn fullwidth en dat moet wel blijven.
Hoe kan ik dat in jouw structuur opzet zetten?

Thanks! :thumb:
 
Fixed header en footer. Een beetje van Bootstrap geleend en de rest eromheen gebouwd.
Code: 
html:

<body>
<header id="header" class="fixed-top">
  <div class="container">
    Dit is de header
  </div>
</header>
<section id="content" class="container">
  <div class="inner">
    <p>Begin content<br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>Eind content</p>
  </div>
</section>
<footer id="footer" class="fixed-bottom">
  <div class="container">
    Dit is de footer
  </div>
</footer>
</body>

css:

html, html * { /*simpele reset*/
  margin: 0; padding: 0; font: 14px/24px sans-serif;
}
header, section, footer { /*ie8*/
  display: block;
}
html, body { /*volledige hoogte*/
  height: 100%;
  min-height: 100%;
  position: relative;
}
body {
  background: #ff9;
}
.container { /*klein scherm*/
  width: 100%;
  padding: 0 15px;
}
@media (min-width: 768px) {
  .container { /*grotere scherm*/
    width: 750px;
    margin: 0 auto;
  }
}
#header {
  width: 100%;
  height: 80px;
  background-color: #ccc;
}
#content {
  min-height: 100%;
  background: #fff;
}
#content > .inner {
  padding-top: 80px; /*hoogte van header*/
  padding-bottom: 60px; /*hoogte van footer*/
}
#footer {
  width: 100%;
  height: 60px;
  background-color: #ccc;
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1031;
}

Suc6
 
Ha Bron! Warme dag om te programmeren maar wel een leuk project om af te krijgen dit :)
Ja met jouw code gaat het vast lukken maar nu is er wel nog iets wat ik liever anders zie. Bij de content div komt nu bij langere tekst een scrollbar. Komt denk ik omdat footer fixed is? Ik vind het wel leuk maar als de footer mee naar beneden scrollt is het toch beter. Heb je een tip daarvoor?

En waarom zou ik überhaupt het sticky footer probleem niet oplossen door een min-height van 500px of in em op de #content div te zetten (in de originele code)?
 
Laatst bewerkt:
Bij de content div komt nu bij langere tekst een scrollbar.
Klik om te vergroten...
Dit is in elke browser zo. Standaard staat overflow ingesteld op 'auto'. Ook als de footer mee zou bewegen krijg je een scrollbar als de pagina te lang is. Je kan eventueel body { overflow-y: scroll } in je css zetten. Dan is hij altijd zichtbaar.

In mijn eerste voorbeeld met table-row kun je de content geen eigen achtergrondkleur geven in de volledige hoogte zodra de header / footer even breed als de view is. Mij is het zo gauw niet gelukt.

Heb je een tip daarvoor?
Klik om te vergroten...
Snel over naar bootstrap. In bootstrap is dit netjes in Javascript verzorgd. De scrollbar is licht transparant gemaakt en alleen zichtbaar als je de muis boven de browser beweegt (of touchscherm aanraakt). Als je dat niet doet verdwijnt de scrollbar na 2 seconden met een korte fade-out.

oplossen door een min-height van 500px
Klik om te vergroten...
Er zijn te veel vershillen in de resolutie. Als je 'm geschikt maakt voor 1050px dan heb je geen sticky footer op 900px of 1080px. Om over de mobiles nog maar te zwijgen.

*** aanvulling: scrollbar in bootstrap verdwijnt automatisch (2x screenshote)
no-scrollbar.png scrollbar.png
 
Laatst bewerkt:
Het wordt in het algemeen afgeraden om de vorm of kleur van scrollbars aan te passen omdat dit een website bezoeker in verwarring kan brengen. Als je de scrollbars toch mooier wilt maken (dat ze meer tegen de achtergrond wegvallen) dan kun je http://jscrollpane.kelvinluck.com/fullpage_scroll.html gebruiken.

Suc6.
 
Goedemorgen Bron. Veel wijzer geworden door je opmerkingen, aanpassingen en weblink. Dank je daarvoor!! :thumb:

Je oplossing gaat wel iets de andere kant op als wat ik eigenlijk bedoelde. Ik zal wel niet goed uitleggen wat het probleem is...
Kijk, de achtergrond moet doorlopen tot de footer. De footer blijft nu dankzij jouw hulp al netjes staan. Als de pagina langer wordt dan mag de footer omlaag uit het scherm gaan, dat vind ik geen probleem.
 
@Bron, met jouw bericht #6 en aanpassing in structuur (div #page toegevoegd) is het gelukt wat ik wil. :D Nu nog in de WordPress omgeving zetten. Klopt het jouw inziens ook zo?
Zie de JSFiddle
 
Ziet er goed uit :thumb:

Ik zou zelf #page nog iets wijzigen
Code: 
#page {
    max-width: 800px;
    margin: 0 auto;
    height: 100%;
    background-color: white;
    /* background-attachment: scroll; */  /*default; regel mag weg*/
}
en dit toevoegen om te voorkomen dat de content verspringt als je van een korte pagina naar een lange pagina gaat.
Code: 
body {
   overflow-y: scroll;
}

Suc6 met het overzetten naar WP.
 
Toch nog even in je vraag gedoken over de scrollbar. In de bijlage vind je html/css voor

Fixed header & footer
- footer beweegt mee bij te lange tekst.
- responsive, mobile first.
- ie8 ondersteuning.
- geen javascript, alleen css.
- header & footer elke hoogte zonder css aanpassing.

Extraatje: jquery NiceScroll
- mooie scrollbar op alle browsers.
- scrollbar verdwijnt als deze niet nodig is.
- fade-out scroll.

Suc6.
 

Bijlagen

  • Fixed-header-footer.zip
    22,3 KB · Weergaven: 49
Ziet er mooi uit @Bron! Precies wat ik wil. Moet het alleen nog in de huidige structuur flansen. Heb je bericht vandaag gemist want bijna de hele dag met probleem bezig geweest om jouw vorige tips in de bestaande html structuur te zetten.
Morgenmiddag kan ik pas met jouw nieuwe fixed-header-footer aan de slag en de css op mijn html structuur proberen toe te passen.

Voor de volledigheid zal ik de html structuur die ik heb erbij zetten.

Code: 
<html>
<head>
<title>sticky footer 4 underscores</title>
<link rel='stylesheet' id='style-css'  href='style-underscores.css' type='text/css' media='all' />
</head>
<!-- WordPress Underscores theme 2015 html structure -->
<!-- hier begint header.php -->
<body>
<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		<div class="site-branding">
			<h1>site-title</h1>
			<h2>description</h2>
		</div><!-- .site-branding -->

		<nav id="site-navigation" class="main-navigation" role="navigation">
			menu gecentreerd in het midden
		</nav><!-- #site-navigation -->
	</header><!-- #masthead -->

	<div id="content" class="site-content">

	<!-- hier begint page.php -->
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			
			Content 1200px in het midden
			Nam lobortis purus leo, in condimentum risus fermentum in. Curabitur laoreet, est non viverra sollicitudin, risus tortor mattis metus, et egestas magna metus et mi. Nulla cursus, ante pellentesque auctor lobortis, leo est pulvinar arcu, ut dignissim lorem leo vitae lectus. Donec lacinia pharetra magna sit amet tincidunt. Aenean ornare consectetur arcu, eu suscipit magna sodales gravida. Vestibulum sollicitudin mauris sit amet pretium cursus. Maecenas consequat sapien massa, non gravida risus feugiat sit amet. Curabitur nisi lacus, blandit sed sapien non, pellentesque efficitur risus. Maecenas accumsan venenatis vulputate.sapien massa, non gravida risus feugiat sit amet. Curabitur nisi lacus, blandit sed sapien non, pellentesque efficitur risus. Maecenas accumsan venenatis vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec tincidunt felis. Aliquam erat volutpat. In tellus sapien, placerat in nisi non, molestie tempor sem. Aliquam tellus lacus, lacinia eu tortor non, hendrerit volutpat magna. Nam lobortis purus leo, in condimentum risus fermentum in.
            
		</main><!-- #main -->
	</div><!-- #primary -->

    <!-- hier begint footer.php -->
	</div><!-- #content -->

	<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info">
			footer
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>
 
Laatst bewerkt:
Ik zie dat je breedte 1200px is. Als je ooit Bootstrap gaat gebruiken, neem dan de volgende mobile-first breakpoints op in de css.
Code: 
.responsive {
  width: 100%;
  .....
}
@media (min-width: 768px) {
  .responsive {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .responsive {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .responsive {
    width: 1170px;
  }
}
De classnaam .responsive is in Bootstrap eigenlijk .container maar het gaat om de breakpoints. 0-767px is de smartphone. Vanaf 768px de tablet. Vanaf 992px de monitor. Vanaf 1200px de brede monitor.

Als je layout een andere maximale breedte heeft (bijvoorbeeld 1035px, gebruik dan geen max-width, maar doe dit zo
Code: 
@media (min-width: 1065px) { /* wat lucht bij de breakpoint overgang */
  .responsive {
    width: 1035px;
  }
}

Have fun met de structuur.

Suc6

*** aanvulling. Begin altijd als eerste met de volgende regels. Als je dit achteraf doet dan kun je na het bouwen van je structuur voor verrassingen komen te staan.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
Laatst bewerkt:
Hartstikke fijn @Bron! Goede tips wederom :thumb:
Ik ga ermee aan de slag.
 
Ha Bron. Ik ben een stuk verder gekomen maar het is nog niet wat ik wil. Ik merkte dat als de footer soms groter en soms kleiner is een fixed height niet goed werkt. Helemaal opnieuw begonnen, WordPress weer geinstalleerd en een recent leeg thema gepakt (underscores) en via Google een klein stukje code gevonden zodat sticky footer werkt.
Alleen... het licht grijze van de content loopt nog niet door.
Ik heb al geprobeerd de content div in een wrap div te pakken en die height 100% te geven maar lukt niet.
Wil je nog 1 keer kijken a.u.b.?? :)

De CSS code is bijna geheel van underscores op klein stukje van die geekgirl na en wat kleurtjes van mij.
Hier is linkje naar andere testsite.
 
Het voorbeeld geeft inderdaad korte clean html/css. Ik heb niet je pagina uitgeplozen maar alleen het voorbeeld bekeken. Kun je met het volgende verder?
Code: 
.site {
   background-color: #ff6;
}
.site-header {
   width: 100%;
   background-color: #6ff;
}
.site-content {
   width: 100%;
}
.site-footer {
   width: 100%;
   background-color: #f6f;
}

Suc6
 
Hoi Bron, jammer genoeg werkt het met de toevoeging van de code niet. Ik zal plaatje laten zien wat ik eigenlijk graag wil.
helpmij15062015.jpg
 
Laatst bewerkt:
Ik zie het. Lastig. Zowel css als javascript werken niet optimaal. Dit haalde ik van internet:

- CSS Sticky Footer:
will not render correctly on all browsers, and you will have to add fixes or extra HTML markup for some browsers.
- JavaScript Sticky Footer with push div:
has performance and rendering issues on load or resizing.

Html/css is een top > down rendering. Als je naar jQuery of Javascript scripts zoekt zou je misschien iets kunnen vinden wat cross browser is, een goede performance heeft, en zo weinig mogelijk knippert bij resizen.

Suc6.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan