Automatique de la hauteur de la div

Navigateur affiche div seulement lorsque j'ai mis en hauteur exacte. Mais je veux créer redimensionnable div selon son contenu. Essayé height: auto et hauteur:100%. Il ne l'aide pas.

Mon div ressemble à ça. Un fond div des barres de navigation et le 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 code 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>
  • Qu'entendez-vous par son contenu ? Image d'arrière-plan ?
  • Pourriez-vous s'il vous plaît poster la façon dont vous utilisez votre div.wrapper? Il est comme le <div class="wrapper">content content</div> ou <div class="wrapper"/>content content?
  • mise à jour de la question. veuillez revérifier
InformationsquelleAutor Tural Ali | 2011-07-28