Bug <!DOCTYPE html> ? par Midnight17 - page 1

Bonjour, je ne sais pas si ce sujet est bien placé (mon code comprenant du bootstrap) mais je pense que oui :x

Mon problème est le suivant :

J'ai créer une navbar avec bootstrap et tout fonctionne très bien
J'ai voulu insérer dessus un scrollspy
Le scrollspy une fois actif fait planté le background de ma section 1 (le scrollspy fonctionne) Par "planté" j'entend par la que le height: 100%; est désactivé
Si <!DOCTYPE html> est remplacé par <!DOCTYPE> le background reprend sa height 100% mais le scrollspy ne fonctionne plus
Mon code ne comporte visiblement aucune erreur HTML (Validate W3C)
J'ai bidouillé le peu de CSS que j'ai mais rien n'y fait, la seule méthode qui fonctionne pour avoir un background assez long et un scrollspy actif dans le même temps et d'affecter une height en px au background (donc pas très pratique pour les personnes ayant avec une résolution différente et qui visiteront le site)

Merci d'avance à toute personne qui prendra un peu de temps pour me venir en aide

Je vous joins quelques screens / mon code :

<!DOCTYPE html>
<html lang="en">

	<head>
		<title> Titre Titre Titre </title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="CSS/style.css">
	</head>

	<body data-spy="scroll" data-target=".navbar" data-offset="50">

		<nav class="navbar navbar-inverse navbar-fixed-top">
  			<div class="container">
    			<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>
      				<span class="navbar-brand"> --> Nom <-- </span>
    			</div>
    			<div>
      				<div class="collapse navbar-collapse" id="myNavbar">
        				<ul class="nav navbar-nav navbar-right">
							<li><a href="#section1"> Link 1 </a></li>
							<li><a href="#section2"> Link 2 </a></li>
							<li><a href="#section3"> Link 3 </a></li>
							<li><a href="#section4"> Link 4 </a></li>
							<li><a href="#section5"> Link 5 </a></li>
						</ul>
      				</div>
    			</div>
  			</div>
		</nav>    

		<section id="section1">
			<div class="intro">
				<p> Test </p>
				<h1> Test </h1>
				<p> Test </p>
			</div>
		</section>


		<section id="section2" class="container-fluid">
		  	<h2>Du blabla</h2>
		</section>

		<section id="section3" class="container-fluid">
		  	<h2>Du blabla</h2>
		</section>

		<section id="section4" class="container-fluid">
		  	<h2>Du blabla</h2>
		  	
		</section>

		<section id="section5" class="container-fluid">
		  	<h2>Du blabla</h2>
		</section>

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

</body>

</html>

/* CSS */

#section1
{
	background: url('http://image.noelshack.com/fichiers/2017/25/5/1498233665-lr.jpg') no-repeat center center / cover fixed;
	height: 450px;
}

/* Texte écrit sur le background */
.intro
{
	height: 100%;
	position: relative;
	overflow: hidden;
	color: white;
	font-size: 20px;
	text-align: center;
}

Midnight17

23 juin 2017 à 18:17:56

Rennor974

23 juin 2017 à 22:14:17

 body, head{
height:100%;
}

EmmanuelBeziat

24 juin 2017 à 7:33:29

Salut,

Non, height: 100% n'est pas "désactivé". La hauteur ne fonctionne pas comme la largeur, et une hauteur relative doit être référée à quelque chose. Si l'élément parent a une taille définie, alors on peut utiliser une hauteur relative sur son descendant direct, pas autrement.

Plus simple que ça, utilise l'unité vh, relative à la hauteur de la fenêtre : En faisant min-height: 100vh sur ton bloc, tu es sûr qu'il occupe au moins la hauteur de la fenêtre. Mieux, avec calc() tu peux même retirer la hauteur de la navbar (en mesurant sa taille) : min-height: calc(100vh - 48px);

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Bug <!DOCTYPE html> ?

Bug <!DOCTYPE html> ?

Supprimer

Modérer

Signaler le message aux modérateurs