J'ai une barre de navigation sur le côté gauche de ma page, et je veux qu'elle s'étire jusqu'à 100% de la hauteur de la page. Pas seulement la hauteur de la fenêtre, mais également les zones cachées jusqu'à ce que vous faites défiler. Je ne veux pas utiliser javascript pour cela.
Peut-on le faire en HTML / CSS?
Réponses:
Voici la solution que j'ai finalement trouvée lors de l'utilisation d'un div comme conteneur pour un arrière-plan dynamique.
z-index pour les utilisations non liées au fond.leftouright pour une colonne pleine hauteur.topou bottompour une ligne pleine largeur.EDIT 1: CSS ci-dessous a été modifié car il ne s'affiche pas correctement dans FF et Chrome. déplacé position:relativepour être sur le HTML et définir le corps au height:100%lieu de min-height:100%.
EDIT 2: Ajout de commentaires supplémentaires au CSS. Ajout de quelques instructions supplémentaires ci-dessus.
Le CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}Le html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>Pourquoi?
html{min-height:100%;position:relative;}Sans cela, le DIV du conteneur cloud est supprimé du contexte de mise en page du HTML. position: relativegarantit que le DIV reste à l'intérieur de la zone HTML lorsqu'il est dessiné, ce qui bottom:0fait référence au bas de la zone HTML. Vous pouvez également l'utiliser height:100%sur le cloud-container car il fait désormais référence à la hauteur de la balise HTML et non à la fenêtre d'affichage.
htmlélément. Pourquoi donc?
heightc'est dire que vous êtes si grand; Ni plus ni moins.' Ce qui signifie que ce sera la hauteur de la fenêtre. Nous voulons qu'elle soit au moins aussi haute que la fenêtre ou plus haute. min-heightle fait bien.
<html>et la position dans la fenêtre étaient deux choses distinctes. Je vous remercie!
Avec HTML5, la façon la plus simple est simplement de le faire height: 100vh. Où «vh» représente la hauteur de la fenêtre d'affichage de la fenêtre du navigateur. Adapté au redimensionnement du navigateur et des appareils mobiles.
vw.
J'ai eu un problème similaire et la solution était de le faire:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}Je voulais un div centré sur la page avec une hauteur de 100% de la hauteur de la page, donc ma solution totale était:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}Vous devrez peut-être faire en sorte qu'un élément parent (ou simplement «corps») ait position: relative;
cloud-container?
Vous pouvez tricher en utilisant des fausses colonnes ou vous pouvez utiliser une astuce CSS
C'est simple en utilisant une table:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>Lorsque DIV a été introduit, les gens avaient tellement peur des tables que le pauvre DIV est devenu le marteau métaphorique.
Utilisez la position absolue. Notez que ce n'est pas ainsi que nous sommes généralement habitués à utiliser la position absolue, ce qui nécessite de disposer manuellement les choses ou d'avoir des boîtes de dialogue flottantes. Cela s'étirera automatiquement lorsque vous redimensionnerez la fenêtre ou le contenu. Je crois que cela nécessite un mode standard mais fonctionnera dans IE6 et supérieur.
Remplacez simplement le div par l'id 'thecontent' par votre contenu (la hauteur spécifiée est juste pour l'illustration, vous n'avez pas besoin de spécifier une hauteur sur le contenu réel.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>La façon dont cela fonctionne est que le div externe sert de point de référence pour la barre de navigation. Le div extérieur est étiré par le contenu du div «contenu». La barre de navigation utilise un positionnement absolu pour s'étirer jusqu'à la hauteur de son parent. Pour l'alignement horizontal, nous divisons le contenu par la même largeur de la barre de navigation.
Cela est rendu beaucoup plus facile avec le modèle de boîte flexible CSS3, mais ce n'est pas encore disponible dans IE et a certaines de ses propres bizarreries.
J'ai rencontré le même problème que toi. Je voulais faire unDIV arrière-plan, pourquoi, parce que c'est facile à manipuler div via javascript. Quoi qu'il en soit, trois choses que j'ai faites dans le CSS pour cette div.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}Si vous ciblez des navigateurs plus modernes, la vie peut être très simple. essayer:
.elem{
height: 100vh;
}si vous en avez besoin à 50% de la page, remplacez 100 par 50.
Je veux couvrir toute la page Web avant d'inviter une fenêtre contextuelle modale. J'ai essayé de nombreuses méthodes en utilisant CSS et Javascript, mais aucune d'entre elles ne m'aide jusqu'à ce que je trouve la solution suivante. Cela fonctionne pour moi, j'espère que cela vous aide aussi.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>Bonne chance ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>Simple, il suffit de l'envelopper dans un div de table ...
Le HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>Le CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>