CSS à Rendre le contenu de la DIV Auto taille d'après le contenu à l'intérieur
Je suis en train d'essayer de concevoir un modèle de site web pour moi, le problème est que je ne peux pas obtenir le Contenu de la div à l'auto étendre sur le contenu qui est en elle.
Je voulais qu'il redimensionnement automatique donc je n'ai pas besoin de mettre le CSS hauteur manuellement.
Le Code CSS que j'ai fait:
#Container {
position: relative;
width: 800px;
height: 100%;
margin: 0px auto 0 auto;
text-align: left;
padding-left: 1px;
cursor: de;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
border-top: 1px solid #000001;
border-bottom: 1px solid #000001;
background-color: #C1E9FF;
}
#LogoContainer {
background-image: url('/media/Logo.png');
border-right-width: 1px;
border-bottom-width: 1px;
border-right-color: rgb(0,0,1);
border-bottom-color: rgb(0,0,1);
border-right-style: solid;
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
z-index: 1;
}
#LikeBar {
border-bottom-width: 1px;
border-bottom-color: rgb(0,0,1);
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
left: 400px;
z-index: 1;
}
#ButtonHome {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
top: 50px;
z-index: 1;
}
#ButtonVideo {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
left: 105;
top: 50px;
z-index: 1;
}
#Footer {
border-top-width: 1px;
border-top-color: rgb(0,0,1);
border-top-style: solid;
width: 800px;
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
}
#Content {
position: absolute;
top: 90px;
width: 800px;
height: 95%;
border-top: 1px solid #000001;
}
#YouTubeBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 10px;
text-align: center;
}
#TwitterBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 110px;
text-align: center;
}
#FaceBookBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 210px;
text-align: center;
}
.DivT { line-height: 1px }Code HTML avec la balise DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>HTML CODE</title>
<meta name="description" content="Null" />
<meta name="keywords" content="Null" />
<link href="ThemeV1.css" rel="stylesheet" type="text/css" />
</head>
<body background="/media/Background.png">
<div id="Container">
<!-- Start Container -->
<div id="LogoContainer"></div>
<div id="LikeBar"></div><!-- Menu Controls -->
<div id="ButtonHome"></div><!-- WEBSITE CONTENT -->
<div id="Content">
<p class="DivT">We're upgrading the website with a new design and hopefully it will
be faster, so check back later.</p>
</div><!-- END WEBSITE CONTENT -->
<!-- Footer -->
<div id="Footer"></div><!-- End Footer -->
</div><!-- End Container -->
</body>
</html>Alors, quel est le problème? Je veux gagner du temps pour ne pas régler la hauteur manuellement.
Avez-vous vraiment attendre que quelqu'un aller à travers et de lire le CSS que vous avez posté? S'il vous plaît, considérez vos lecteurs lorsque vous postez une question. L'aide est ici, ici et ici.
essayez de changer la hauteur:95% min-hauteur:95%
et ici!
Vous pourriez faire un jsfiddle.net avec votre code. Au moins de cette façon, nous pouvons voir ce qu'il fait.
essayez de changer la hauteur:95% min-hauteur:95%
et ici!
Vous pourriez faire un jsfiddle.net avec votre code. Au moins de cette façon, nous pouvons voir ce qu'il fait.
OriginalL'auteur Teknikk | 2011-12-05
Vous devez vous connecter pour publier un commentaire.
Depuis votre
div#Contentest absolument positionné à l'intérieurdiv#Container, le conteneur va ignorer la hauteur et la largeur du contenu lors de la détermination de ses propres dimensions. Essayez de donner àdiv#Contentunpositionvaleur derelative. Puis, comme mentionné dans les commentaires ci-dessus, passer sonheightpropriétémin-height. Si vous avez besoin de coller avec le positionnement absolu et que vous voulez encore un contenu touchés de la hauteur, vous aurez à utiliser JavaScript pour régler lestyle.heightde la div contenant lorsque la hauteur de la div du contenu des modifications.Vous avez en effet raison. Toutefois, les éléments de bloc avec tout le positionnement va ignorer la largeur/hauteur de leur positionnement absolu enfants. Donc, même si le Contenu de la div se dilate pour s'adapter à son contenu, le div Conteneur qui l'entourent ne le sera pas.
OriginalL'auteur Aaron
Il semble que vous ont régler la hauteur de votre contenu en hauteur manuellement:
Supprimer la
height, et sa hauteur sera tout ce qui est nécessaire pour tenir sa (non-flotté) table des matières.OriginalL'auteur Paul D. Waite
Si vous voulez quelque chose à re-taille ensuite une div sans aucun attribut hauteur définie automatiquement re-tailles à la hauteur du contenu en elle. Si vous voulez qu'il soit au moins XXXpx de hauteur ou de s'adapter à l'écran d'une certaine manière, puis utilisez les min-hauteur de l'attribut. Qui permettra de régler la hauteur pour qu'il s'affiche dans la zone souhaitée si le texte est trop petit et développer si le texte est plus grand que le minimum.
Vous avez donc beaucoup de tailles décrites ici que je ne vais pas aller dans toutes, mais je voudrais ajuster ces au minimum:
* Note - min-height et min-width ne sont pas pris en charge par IE6;
Aussi le positionnement des éléments peut causer beaucoup de problèmes avec votre taille, car ils peuvent prendre l'élément du flux standard de datat, et ce n'est pas vraiment nécessaire si vous définissez votre mise en page correctement, sauf si vous avez besoin de faire quelque chose de précis, comme la fixation d'un z-index ou de vouloir un arrière-plan fixe qui permet de faire défiler avec le site.
OriginalL'auteur CBRRacer