Bande Height 100%

Sujet résolu

16 mai 2018 à 12:06:44

Re Bonjour à tous !

.bande{
	height:100%;
	width:200px;
	background-color:#fafcff;
	position: absolute;
	border-right: 3px solid rgba(83,98,155,0.5);
	
}

Voici le code CSS d'une bande décorative sur le bord de ma page ... enfin sur une petite partie du bord de ma page .... je ne comprends pas bien le height 100%, il ne descend pas jusqu'en bas de page comme je le voudrais et s'arrête subitement a un endroit un peu aléatoire, aligné sur aucune section ou div de ma page ...

je vous met l'html aussi :

<body>
<header class="header">			
			<ul id="menu">
						<li><a href="Page_acceuil">mon site web</a>						
							<ul>
									<li><a href="Page_acceuil">Presentation</a></li>
									<li><a href="leaflet">Countries</a></li>
							</ul>									
						</li>
						<li>
								<a href="dms"></a>
								<ul>
										<li><a href="dms">Presentation</a></li>
										<li><a href="page">Consortium</a></li>
										<li><a href="data">Data</a></li>
								</ul>
						</li>
						<li><a href="workshop">EVENT</a>
								<ul>
										<li><a href="workshop">Workshop</a></li>
										<li><a href="conferences">Conferences</a></li>
								</ul>
						</li>
						<li><a href="partenaires">PUBLICATIONS</a>
			</ul>
						<img class="masquer_menu" src="/static/phaseo2.png" name="oeil" />
						<button type="button" value="" onclick="masquer_menu('menu');" id="hide_menu" class="masquer_menu2" title="Hide/Show Menu"><img scr="/static/phaseo2.png"/></button>
		<script>
			un script
		</script>	
			<div id="barre_bleue"></div>
            <h2> <a href="/">mon site web</a></h2>		
</header>

<section class="image_reseau">            
	<img class = "img_reseau" src="/static/network.jpg">
</section>

<div class="bande"></div>

<section class = "corps">
	<div class = "sidebar_sticky">            
		<ul class="footer_list" id= "list_page1"> 
			<a><h4 class="titre_sidebar">un sujet </h4> </a>                 
			<li> <a href="#REF1" class="lienext"> texte titre </a> </li>					
			<li> <a href="#REF2"  class="lienext"> texte titre </a> </li>					 
			<li> <a href="#REF3"  class="lienext"> texte titre </a> </li>				
		</ul>
	</div>

	<div id ="centre" class="bcg_central">  
			  
					<h3 id="REF1">TITRE 1</h3>  
					
				<section id= "paragraphe1">                    
					<p class="info_long">
						du texte long       
					</p>            
					<figure>                
						<img class="img_sat" src="/static/satellite.jpeg">                
					</figure>                
				</section>
				
					<h3 id="REF2">TITRE 2</h3>  
					
				<section id= "paragraphe2">                 
					<p class="info_long">
						du texte long            
					</p>                
				</section>	
				
					<h3 id="REF3">TITRE 3 </h3> 
					
				<section id= "paragraphe3">
					 <p class="info_long">
						du texte long					
					 </p>                
				</section>			
	</div>
</section>
<footer>
	détails dispensables je pense
</footer>
<script>
</script>
</body>

-
Edité par Skytchup 16 mai 2018 à 12:07:51

Trop jeune pour connaître.

Lamecarlate

16 mai 2018 à 12:12:56

Bonjour,

c'est normal. Une hauteur en pourcentage d'un élément est fonction de la hauteur de son parent direct - d'ailleurs si ce dernier n'a pas de hauteur explicitement définie, l'enfant a une hauteur nulle.

Utilise plutôt "100vh", qui correspond à 100 fois un centième de la hauteur (h) du viewport (v).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Skytchup

16 mai 2018 à 14:10:04

Lamercarlate :

Alors j'ai vu en effet cette histoire de parent et c'est pour cela que je pensais bien faire en mettant mon div (.bande) à même le <body> mais malheureusement la taille ne prend pas tout le body en compte car comme vous le voyez sur l'html, mon body va du header au footer .... Je découvre ce concept depuis peu donc j'ai peut être pas encore bien compris son fonctionnement ...

Ensuite j'ai essayé le 100vh (je l'avais testé auparavant pour d'autres div sans succès) mais encore une fois il n'y a pour mon cas aucune différence :/ j'ai toujours la même taille de div qui se coupe au milieu de la page

.bande{
	height:100vh;
	width:200px;
	background-color:#fafcff;
	position: absolute;
	border-right: 3px solid rgba(83,98,155,0.5);
}

-
Edité par Skytchup 16 mai 2018 à 14:49:40

Trop jeune pour connaître.

Lamecarlate

16 mai 2018 à 14:23:49

> Ensuite j'ai essayé le 100vh (je l'avais testé auparavant pour d'autres div sans succès) mais encore une fois il n'y a pour mon cas aucune différence :/ j'ai toujours la même taille de div qui se coupe au milieu de la page

Ça ne devrait pas être possible. Peux-tu poster une image du résultat, et le code avec ? (l'idéal serait une page en ligne, soit chez ton hébergeur, soit sur jsfiddle.net ou codepen.io)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Skytchup

16 mai 2018 à 14:26:52

photos

EDIT : plus rien !

-
Edité par Skytchup 16 mai 2018 à 16:42:21

Trop jeune pour connaître.

Lamecarlate

16 mai 2018 à 16:13:36

Et le code ?

La bande en question, où est-elle dans tes images ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Skytchup

16 mai 2018 à 16:41:29

J'ai mis le code au dessus dans mes messages, la bande est en css uniquement à partir de border et background -color. C'est le trait vertical sur la gauche avec un fond bleu très proche du blanc. Il semblerai qu'avec le code simplifié cad sans les textes, tout fonctionne mais dès que le texte est long, la bande a une longueur limitée ...

Finalement j'ai mis un background sur mon body, ce qui fonctionne bien (bien que du coup j'ai du modifier l'apparence du site car le modèle de bande que je souhaitais n'est pas compatible avec un background : si l'utilisateur modifie la taille de sa page, je ne veux pas que la bande se décale sans arrêt) donc si vous ne voyez pas non plus ma coquille dans le code ci-dessus, on pourra l'enterrer à jamais et se contenter d'un background plus simpliste !

-
Edité par Skytchup 16 mai 2018 à 16:43:23

Trop jeune pour connaître.

Bande Height 100%

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Bande Height 100%

Bande Height 100%

Supprimer

Modérer

Signaler le message aux modérateurs