Bootstrap: Remplissez le conteneur entier sous la barre de navigation moins la hauteur de la barre de navigation
Sur une page de style avec Twitter Bootstrap et à l'aide de la navbar je voulais remplir le container entier au-dessous de la barre de navigation avec une carte Google Maps. Pour la réaliser, j'ai ajouté du CSS ci-dessous.
Je définir pour la html
et body
éléments la taille à 100%, de sorte que ce est utilisé pour la carte de la taille de la définition. Cette solution, cependant, les rendements à un problème:
La carte de la hauteur est maintenant le même que l'ensemble de la hauteur de la page, ce qui entraîne une barre de défilement qui je peux faire défiler pour la 40px la barre de navigation ajoute. Comment puis-je définir la taille de la carte pour 100% - 40px
de la barre de navigation?
#map {
height: 100%;
width: 100%;
}
#map img {
max-width: none;
}
html, body {
height: 100%;
width: 100%;
}
.fill {
height: 100%;
width: 100%;
}
.navbar {
margin-bottom: 0;
}
Pour l'intégralité du code HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/core.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
</div>
</div>
<div class="container fill">
<div id="map">
</div>
</div>
</body>
</html>
OriginalL'auteur Mahoni | 2012-08-13
Vous devez vous connecter pour publier un commentaire.
Vous pourriez résoudre le problème avec le positionnement absolu.
Démo (jsfiddle)
Vous pouvez également en faire la barre de navigation
.navbar-fixed-top
et en quelque sorte ajouter un rembourrage ou de la marge à l'intérieur de la#map
élément.La réactivité n'est pas un état absolu. Si cela fonctionne pour votre mise en page sur la petite taille des écrans plus larges, alors il est sensible. Si pas, jeter dans un couple de questions des médias et de l'adapter à vos besoins.
Oui, je suis d'accord avec vous, mais si j'ai un Div en position absolute top 40px, standard bootstrap menu de comportement sur des écrans plus petits vont se chevaucher mon div, quand j'ouvre la barre de navigation de menu. Désolé, je voulais juste savoir de cette réponse correspond à mes besoins de mise en page. Vient d'être résolu d'une autre manière (avec Position:static)
pouvez-vous nous expliquer comment vous l'avez résolu avec
position: static;
?Je bifurquais Sherbrow violon pour créer une démo qui contient une carte: jsfiddle.net/wrv369/hy14wepf
OriginalL'auteur Sherbrow