web-dev-qa-db-fra.com

Hauteur automatique de div

Le navigateur affiche div uniquement lorsque j'ai défini la hauteur exacte. Mais je veux créer une div redimensionnable en fonction de son contenu. Hauteur testée: auto et hauteur: 100%. Ça n'aide pas.

Mon div ressemble à ça. C'est la division de fond des barres latérales et du contenu.

.wrapper
    {
        width: 80%;
        height:200px;
        max-width: 1260px;
        min-width: 780px;
        margin: 0 auto;     
        background-image:url(core/design/img/transfff.png);
        -moz-border-radius: 15px 15px 0px 0px;
        border-radius: 15px 15px 0px 0px;
    }

MISE À JOUR mon html ressemble à ça

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-image: url(core/design/img/bg.png);
    background-position:top left;
    background-size:100%;
    background-color:#fff;
    background-repeat:no-repeat;
    margin: 0;
    padding: 0;
    color: #000;
}


ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px; 
a img { 
    border: none;
}

a:link {
    color:#414958;
    text-decoration: underline; 
}
a:visited {
    color: #4E5869;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}


.container {
    width: 80%;
    max-width: 1260px;
    min-width: 780px;
    margin: 0 auto; 
}

.wrapper
{
    width: 80%;
    height:200px;
    max-width: 1260px;
    min-width: 780px;
    margin: 0 auto; 
    background-image:url(core/design/img/transfff.png);
    -moz-border-radius: 15px 15px 0px 0px;
    border-radius: 15px 15px 0px 0px;
    overflow: visible
}

.header {
padding:20px;
}

.sidebar1 {
    float: left;
    width: 20%;

    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 60%;
    float: left;
}
.sidebar2 {
    float: left;
    width: 20%;

    padding: 10px 0;
}

.content ul, .content ol { 
    padding: 0 15px 15px 40px; 
}


ul.nav {
    list-style: none; 
    border-top: 1px solid #666; 
    margin-bottom: 15px; 
}
ul.nav li {
    border-bottom: 1px solid #666; 
}
ul.nav a, ul.nav a:visited{
    padding: 5px 5px 5px 15px;
    display: block; 
    text-decoration: none;
    color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    background: #6F7D94;
    color: #FFF;
}

/* ~~The footer ~~ */
.footer {
    padding: 10px 0;
    position: relative;
    clear: both;
}


.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { /
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>

<body>

<div class="container">
  <div class="header"><a href="#"><img src="core/design/img/logo.png" alt="Insert Logo Here" name="Insert_logo" width="438px" height="95" id="Insert_logo" style=" display:block; margin:0 auto;" /></a> 
    <!-- end .header --></div>
    <div class="wrapper">
  <div class="sidebar1">
</div>
  <div class="content">
    </div>
  <div class="sidebar2">
  </div>
    </div>
  <div class="footer">
  </div>
</div>
</body>
</html>
cssheight
18
Tural Ali

div sera naturellement redimensionné en fonction de leur contenu.

Si vous ne définissez aucune hauteur sur votre div, il s'agrandira pour contenir son contenu.

Une exception à cette règle est lorsque le div contient des éléments flottants. Si c'est le cas, vous devrez faire un peu plus pour vous assurer que le div contenant (wrapper) efface les flottants.

Voici quelques façons de procéder:

#wrapper{
overflow:hidden;
}

Ou

#wrapper:after
{
content:".";
display:block;
clear:both;
visibility:hidden;
}
75
Jamie Dixon

assurez-vous que le contenu de votre div se termine par clair: les deux styles

4
kleinohad

Voici la dernière solution du problème:

Dans votre fichier CSS, écrivez la classe suivante appelée . Clearfix avec le pseudo sélecteur : after 

.clearfix:after {
content: "";
display: table;
clear: both;
}

Ensuite, dans votre code HTML, ajoutez la classe . Clearfix à votre div parent. Par exemple:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Cela devrait toujours fonctionner. Vous pouvez appeler le nom de la classe comme . Group au lieu de . Clearfix, car cela rendra le code plus sémantique. Notez qu'il n'est pas nécessaire d'ajouter le point ou même un espace dans la valeur de Content entre les doubles guillemets "".

Source: http://css-snippets.com/page/2/

3
Ifti Mahmud

Comme indiqué précédemment par Jamie Dixon, un <div> est retiré du flux normal. Tout le contenu qui se trouve toujours dans le flux normal l'ignorera complètement et ne lui fera pas de place.

Essayez de mettre une bordure de couleur différente border:solid 1px orange; autour de chacun de vos <div> éléments pour voir ce qu'ils font. Vous pouvez commencer par supprimer les flottants et mettre du texte factice à l'intérieur du div. Ensuite, stylisez-les un par un pour obtenir la disposition souhaitée.

2
jim31415

Selon this , vous devez attribuer une hauteur à l'élément dans lequel le div est contenu afin que 100% de hauteur fonctionne. Est-ce que ça marche pour toi?

2
Steve Wilkes