Percentage van height in CSS werkt niet

Status
Niet open voor verdere reacties.

pilootnour5

Terugkerende gebruiker
Lid geworden
22 nov 2008
Berichten
1.895
Beste lezer,

Ik zit met een klein HTML/CSS dingetje. Momenteel werk ik met een simpele lay out van Bootstrap. Het probleem is dat de achtergrond met kleur f1f1f1 niet mee verandert met de hoogte van de pagina. Je kunt zien wat ik bedoel op nour.nl/experimenten Hier zie je dat de grijsachtige kleur niet helemaal tot onder doorloopt.

De code van de pagina ziet er als volgt uit:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */
    
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;}
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Phuel</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Profiel</a></li>
        <li><a href="#">Tankbeurten</a></li>
        <li><a href="#">Info</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container-fluid text-center">
  <div class="row content">
    <div class="col-sm-2 sidenav">
    </div>
    <div class="col-sm-8 text-left">
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
      
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
      
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Copyright 2016 © Phuel.nl is onderdeel van Nour.nl</p>
</footer>

</body>
</html>

In de CSS wordt bij sidenav bepaald wat de kleur en hoogte is van de zijkanten van de pagina. Echter is de 100% dus niet werkend. Ik heb via Google gezocht naar een oplossing. Veel mensen melden hetzelfde bij onder andere stackoverflow. De oplossing die elke keer gegeven wordt is om de html en body in de CSS te benoemen met hoogte 100%. Dit omdat dat de parent is van sidenav. Dit heb ik geprobeerd, maar werkt helaas niet.

Iemand enig idee wat er fout is? Hoe zorg ik ervoor dat die twee balken aan de zijkant (de achtergrond) net zo lang zijn als de pagina zelf?

Bij voorbaat dank!
 
Tja, dit is lastig, omdat je een lege div een hoogte probeert te geven. Het enige dat mij gelukt is, (hoewel het misschien niet helemaal is zoals het hoort, maar goed) is om .row-content een height van bijv. 1000px te geven. Dan heb je een vaste pagina-hoogte, maar is je sidebar wel helemaal gevuld met je achtergrondkleur.
 
Beste Venga,

Ik waardeer je reactie enorm. Lijkt erop dat dat de enige oplossing is. Heb het zelf inderdaad ook overwogen maar het mooiste zou zijn geweest als de hoogte variabel had kunnen zijn. Nogmaals bedankt voor de reactie!
 
Tja, 't is wel een beetje een haat-liefde verhouding met CSS hè :rolleyes:

Als er nog eens iets is, vraag je het maar :thumb:
 
Als ik je vraag goed begrijp kun je het zo doen.
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>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
/* view heeft volledige hoogte */
html, body {
	height: 100%;
}
/* navbar geen margin-bottom en afgeronde borders */
.navbar {
	margin-bottom: 0;
	border-radius: 0;
}
/* alle kolommen lichtgrijs... */
.columns {
	background-color: #f1f1f1;
}
/* behalve center kolom */
.col-center {
	background-color: white;
}
/* de 3 kolommen wat padding */
.col-left, .col-center, .col-right {
	padding-top: 15px;
	padding-bottom: 15px;
}
/* footer */
.footer {
	background-color: #555;
	color: white;
	padding: 15px;
}
</style>
</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Phuel</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
	<ul class="nav navbar-nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">Profiel</a></li>
	<li><a href="#">Tankbeurten</a></li>
	<li><a href="#">Info</a></li>
	</ul>
	<ul class="nav navbar-nav navbar-right">
	<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
	</ul>
</div>
</div>
</nav>

<div class="container-fluid columns">
<div class="row">

<!-- HIERONDER LINKER KOLOM -->
<div class="col-sm-2 col-left text-center">
<p>Lorem ipsum dolor sit amet<br>Lorem ipsum dolor sit amet.<br>Lorem ipsum dolor sit amet.<br>Lorem ipsum dolor sit amet.<p>
</div>

<!-- HIERONDER MIDDEN KOLOM -->
<div class="col-sm-8 col-center">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p>
</div>

<!-- HIERONDER RECHTER KOLOM -->
<div class="col-sm-2 col-right text-center">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>

</div> <!--/.content-->
</div> <!--/.columns-->

<footer class="container-fluid footer text-center">
<p>Lorem ipsum dolor sit amet.
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
Ik zou een andere site nemen om Bootstrap voorbeelden vanaf te halen want je voorbeeld is niet optimaal.

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan