28172 sujets

CSS et mise en forme, CSS3

[Résolu] Css et hauteur de div en pourcentage

Bonjour,

Je crée un site web pour moi-même et j'ai quelques soucis.
Pour que le rendu soit le même sur tous les écrans, j'utilise les pourcentages. Cependant, j'ai quelques problèmes avec la hauteur des div.

Voici dans un premier temps le code
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mon petit bazar</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
		
		<div id="titre_site">
			<p>
				Mon petit bazar
			</p>
		</div>
		
		<div id="titre_page">
			<p>
				Accueil
			</p>
		</div>
		
		<div id="menu_site">
			<ul class="rubriques">
				<li><a href="coups_de_coeur"> Coups de coeur </a> </li>
				<li><a href="mes_projets"> Mes projets </a></li>
				<li><a href="moi"> Qui suis-je ? </a></li>
				<li id="actif">Accueil</li>
			</ul>
		</div>
		
		<div id="menu_page">
			<ul class="items">
				<li> <a href="#ancre_1">Ancre 1</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
			</ul>
		</div>
		
		<div id="contenu">
			<h1 id="ancre_1"> Un titre</h1>
			<p>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			</p>
			
			<h1 id="ancre_2">Un autre titre</h1>
				<p>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			</p>
			
			
		</div>
    </body>
</html>

html
{
	height: 100%;
}

body 
{
	margin : 5% 5% 5% 5%;
	font-family : verdana, arial, sans-serif;
	font-size : 12px;
	width : 90%;
	min-height : 100%;
}

#titre_site
{
	background-color : #99CFFB;
	width : 100%;
	padding : 0%;
	margin : 0%;
	border-bottom : 1px dotted;
}

#titre_site p
{
	color : #AA0000;
	font-size : 300%;
	font-style : italic;
	text-align : center;
	padding : 1%;
	margin:0%;
}

#titre_page
{
	background-color : #99CFFB;
	width : 100%;
	padding : 0%;
	margin:0%;
	
}

#titre_page p
{
	font-size : 200%;
	font-style : italic;
	text-align : right;
	padding : 1%;
	padding-right: 15%;
	margin:0%;
}	

#menu_site
{
	background-color : #FFC6AA;
	width : 100%;
	height : 50px;
	margin : 0%;
	padding : 0%;
}

.rubriques
{
	list-style-type: none;
	margin : 0%;
	padding : 0.5%;
	padding-right : 5%;
	font-size : 110%;
}

.rubriques li
{
	float : right;
	border : 1px dotted black;
	padding : 1%;
	margin-left : 0.2%;
}

.rubriques a:hover
{
	color : black;
	background-color : #99CFFB;
}

.rubriques a 
{
	display: block;
	color: black;
	width:100%;
	height:100%;
	text-decoration: none;
}

.rubriques #actif 
{
	background-color: #99CFFB;
}

#menu_page
{
	float : left;
	border : 1px solid black;
	background-color : #FFC6AA;
	width : 25%;
	min-height : 70%;
}


Mes problèmes se trouvent pour les deux parties roses : menu_site et menu_page. Pour menu_site, j'aimerais mettre une hauteur fixe en pourcentage, mais peu importe la valeur ça reste à la même taille.
Pour menu_page, j'aimerais que ça ait la hauteur du reste de la page et que quand on descend, la liste reste fixe par rapport à la scrollbar (pas la question ici mais bon ^^ une indication est toujours la bienvenue) et que le cadre ait toujours la hauteur maximum par rapport à la page.

Merci d'avance
Bonne journée

Edit : Pour que le menu de la page reste au même endroit, position fixed fonctionne assez bien mais avec un exemple que j'ai (et que je copie un peu) et qui est fait en px, on voit la div menu_page se séparer de la div menu_site ce que je ne veux pas Smiley ohwell Merci encore
Modifié par Ccile13 (16 Jun 2014 - 16:35)
Désolée du double-post mais je pense que c'est mieux ainsi.
Problème résolu avec overflow : auto.

Il me reste à gérer la position du menu de gauche. Je poserai la question dans un autre post.

Merci
Modifié par Ccile13 (16 Jun 2014 - 16:35)
Oups j'ai oublié de mettre en résolu. Il devrait y avoir un autre moyen que de le faire en postant non ?
Administrateur
Je ne sais même pas comment tu fais en postant ? Enfin j'ai pas essayé Smiley lol
Il suffit de cliquer sur "éditer (le 1er message)", d'éditer le titre (sans toucher au texte du 1er message / sujet) et de valider
Felipe a écrit :
Je ne sais même pas comment tu fais en postant ? Enfin j'ai pas essayé Smiley lol
Il suffit de cliquer sur "éditer (le 1er message)", d'éditer le titre (sans toucher au texte du 1er message / sujet) et de valider

Lorsque tu réponds à un sujet que tu as créé :

upload/12813-Felipe.png
Administrateur
Ah ouais tiens Smiley rolleyes Smiley lol
Je viens de tester sur un de mes sujets et effectivement il y a cette option (depuis 2 ans sûrement Smiley confused ). Et il faut bien taper un texte sinon "Texte trop court". Bon c'est améliorable comme fonctionnalité.
Sujet clos
Aller à