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:
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!
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!