Rebonjour,
Dans le cas de page avec moins de contenu, j'essaye de forcer la hauteur du viewport à 100 pour remplir la page et cacher le body (mis volontairement ici en violet).
http://www.transduction-meeting.lu/hotels.php
J'ai trouvé cette méthode Appliquer une hauteur de 100% à un élément mais je ne trouve pas mon erreur.
Dans mon cas j'applique une hauteur de 100 % à mon conteneur (frame) et une hauteur min-height: 100% à mon div texte mais cela ne donne pas le résultat escompté.
Mon raisonnement est il correct? Ou y a t'il des incohérence dans mon code ?
Merci d'avance.
Dans le cas de page avec moins de contenu, j'essaye de forcer la hauteur du viewport à 100 pour remplir la page et cacher le body (mis volontairement ici en violet).
http://www.transduction-meeting.lu/hotels.php
J'ai trouvé cette méthode Appliquer une hauteur de 100% à un élément mais je ne trouve pas mon erreur.
Dans mon cas j'applique une hauteur de 100 % à mon conteneur (frame) et une hauteur min-height: 100% à mon div texte mais cela ne donne pas le résultat escompté.
body
{
font-family: Arial, sans-serif;
font-size: 1em;
margin: 0;
background-color: #660033;
}
#frame
{
margin: 0;
}
#bann
{
height: 180px;
background-color: #FFFFFF;
background-image: url(../style/pictures/bannier.gif);
background-repeat: no-repeat;
background-position: center;
padding: 5px;
}
#liner
{
height: 2px;
background-color: #A7A37E;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
/* Debut style header */
#header
{
height: 40px;
background-color: #FF00FF;
text-transform: uppercase;
margin: auto;
}
ul#header
{
list-style-type: none;
text-align: center;
background: #dddddd; /* Old browsers */
background: -moz-linear-gradient(top, #537AAD 0%, #285999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#537AAD), color-stop(100%,#285999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #537AAD 0%,#285999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #537AAD 0%,#285999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #537AAD 0%,#285999 100%); /* IE10+ */
background: linear-gradient(to bottom, #537AAD 0%,#285999 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D6AA3', endColorstr='#285999',GradientType=0 ); /* IE6-9 */
margin-left: -40px;
}
ul#header li
{
display: inline-block;
}
ul#header li a
{
padding: 5px;
margin: 0 5px 0 5px;
line-height: 25px;
font-size: 0.9em;
font-weight: bold;
letter-spacing: 1px;
color: #FFFFFF;
display: inline-block;
text-decoration: none;
}
ul#header li a:hover
{
color: #A0A0A0;
}
/* Fin style header */
#conteneur
{
height: 100%;
padding:0 180px 0 180px;
margin: 0 auto;
background: #dddddd; /* Old browsers */
background: -moz-linear-gradient(top, #285999 0%, #FFFFFF 80%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#285999), color-stop(80%,#FFFFFF)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #285999 0%,#FFFFFF 80%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #285999 0%,#FFFFFF 80%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #285999 0%,#FFFFFF 80%); /* IE10+ */
background: linear-gradient(to bottom, #285999 20%,#FFFFFF 80%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#285999', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
/* Debut style texte */
#texte
{
min-height: 100%;
background-color: #FFFFFF;
margin-left: 100px;
margin-right: 100px;
line-height: 1.7em;
padding: 12px;
text-align: justify;
font-size: 0.8em;
}
<body>
<div id="frame">
<div id="bann">
</div>
<div id="liner"></div>
<div id="header">
<?php include("style/php/header.php"); ?>
</div>
<div id="conteneur">
<div id="texte">
<h3>Hotel Information</h3>
For this meeting we suggest a number of hotels at walking distance (no bus shuttle), in Esch-sur-Alzette or in Luxembourg City. Luxembourg City is approximately half-an hour away from the conference venue by car/bus/train and provides a large offer of hotels. We request our participants to contact the hotel in order to do the reservations personally.
<br/>
<br/>
For additional accommodation options in Belval and Esch-sur-Alzette, <a href="http://www.esch.lu/tourisme/hebergement/Pages/default.aspx" target="_blank">see here</a>.
<br/>
<br/>
For additional accommodation options in Luxembourg, <a href="http://www.lcto.lu/en/hb/hebergement" target="_blank">see here</a>.
</div>
</div>
<?php include("style/php/footer.php"); ?>
</div>
</body>
Mon raisonnement est il correct? Ou y a t'il des incohérence dans mon code ?
Merci d'avance.