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
Vous devez vous connecter pour publier un commentaire.
div
's va naturellement redimensionner en accord avec leur contenu.Si vous ne définissez pas de la hauteur sur votre div, il s'étendra à contenir ses conent.
Une exception à cette règle est lorsque la div contient des éléments flottants. Si c'est le cas, vous aurez besoin de faire un peu plus pour s'assurer que le div contenant (wrapper) efface les flotteurs.
Voici quelques façons de le faire:
Ou
assurez-vous que le contenu à l'intérieur de votre div terminé avec clear:both style
Ici est la Dernière solution du problème:
Dans votre fichier CSS écrire la classe suivante appelé .clearfix avec le pseudo sélecteur de :après
Ensuite, dans votre code HTML, ajouter le .clearfix classe à votre Div parent. Par exemple:
Il doit travailler toujours. Vous pouvez appeler le nom de la classe comme .groupe au lieu de .clearfix , car elle rend le code plus sémantique.
Notez que, il n'est Pas nécessaire d'ajouter le point ou même un espace dans la valeur de Contenu entre les guillemets "".
Source: http://css-snippets.com/page/2/
Selon cette, vous devez attribuer une hauteur de l'élément dans lequel la div est contenue dans la commande de 100% de la hauteur de travail. Cela fonctionne pour vous?
Comme indiqué précédemment par Jamie Dixon, une flottait
<div>
est retiré de la circulation normale. Tout le contenu qui est toujours dans son flux normal va l'ignorer complètement et de ne pas faire de l'espace pour cela.Essayer de mettre une couleur différente frontière
border:solid 1px orange;
autour de chacun de vos<div>
éléments pour voir ce qu'ils font. Vous pourriez commencer par le retrait de la flotte et de mettre certains faux texte à l'intérieur de la div. Ensuite, le style de leur temps pour obtenir la mise en page souhaitée.