Hauteur DIV extensible pour s'adapter au contenu interne - qu'est-ce que je fais mal?
Mise à jour
Résolu, que c'était le plus profond div besoin d'avoir de l'auto de la hauteur, car il avait une hauteur fixe que j'avais complètement oublié
J'ai - comme beaucoup d'autres, j'ai cherché et trouvé - essayé de faire un DIV extensible qui s'étend à partir de la longueur de son contenu. Le mien est un peu différent de ceux que j'ai vu jusqu'à présent, comme je l'ai variables provenant des Contrôleurs externes à l'affichage, mais à côté de ce que je suis en train de réaliser est le même.
J'ai créé un DIV qui contient l'image que j'ai repeat-y dans le fond, cependant, le contenu interne DIV ne veut pas s'étendre.
Je vais poster mon code un peu de clarté -
<div id="feedback_question" class="span-14">
<div id="title_bar">
<img id="brand_image" src="<?php echo img_path() . $title_row[0]->filename;?>">
<div id="brand_text">
<div id="brand_title"><?php echo $title_row[0]->name;?></div>
<div id="brand_description"><?php echo $title_row[0]->description;?></div>
</div>
</div>
<div id="background_stretch">
<div id="question_background">
<div id="question_tabs" class="span-14">
<ul id="tab_list">
<?php for($i = 1; $i <= $maxQuestions; $i++) { ?>
<li class="tab" id="tab_<?php echo $i; ?>">
Q<?php echo $i; ?>
</li>
<?php }; ?>
</ul>
<div class="question_body">
<!--Load question template here -->
<?php echo $questions?>
</div>
</div>
</div>
<div id="bottom_section">
<div id="bottom_button_holder">
<div id="next_button"></div>
</div>
</div>
<br class="clear" />
</div>
<div id="background_bottom">
<a id="invite_button" href="#"><img src="<?php echo img_path(); ?>feedback/question/invite_button.png"/></a>
</div>
Et voici mon CSS -
.clear {
clear: both;
}
.video_multi, .video_multi, .image_multi, .image_multi, .text_multi, .text_multi {
display: none;
}
#feedback_question {
background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg.png') no-repeat scroll;
height: auto;
}
#title_bar {
height: 170px;
border: 1px solid #EBDDE2;
background: white;
width: 501px;
margin-top: 41px;
margin-left: 8.5px;
}
#brand_image {
height: 120px;
width: 170px;
border: 2.5px solid #EBDDE2;
margin: 20px;
float: left;
}
#brand_text {
float: right;
width: 283px;
height: 150px;
padding-top: 20px;
}
#brand_title {
font-size: 28px;
color: #4365c6;
}
#brand_description {
width: 280px;
}
#question_tabs {
background: transparent url('<?php echo img_path(); ?>feedback/question/tab_bar.png') no-repeat scroll;
height: 40px;
padding-top: 22px;
}
#question_background {
border-left: 1px solid #057eb5;
border-right: 1px solid #057eb5;
border-top: 1px solid #057eb5;
height: 335px;
width: 501px;
margin-bottom: -12px;
overflow: hidden;
}
#tab_list {
margin-bottom: 5px;
}
.tab {
background: transparent url('<?php echo img_path(); ?>feedback/question/question_tab_sprite.png') no-repeat scroll 0 0;
cursor: pointer;
display: inline;
height: 54px;
list-style: none outside none;
margin-right: -3px;
padding-left: 16px;
padding-right: 13px;
padding-top: 13px;
width: 29px;
color: white;
font-weight: bold;
}
.tab_hover{
background-position: 0px -32px;
}
.tab_selected {
background-position: 0px -64px;
color: #0881ba;
}
#bottom_button_holder {
background: transparent url('<?php echo img_path(); ?>feedback/question/question_button_bg.png') no-repeat scroll;
height: 47px;
width: 503px;
display: block;
}
#next_button {
background: transparent url('<?php echo img_path(); ?>feedback/question/next_button.png') no-repeat scroll;
height: 33px;
width: 98px;
display: block;
position: relative;
left: 375px;
top: 5px;
cursor: pointer;
}
.question_body {
height: 270px;
width: 500px;
}
.question_image_holder {
list-style: none;
display: inline;
margin-right: 15px;
width: 100px;
}
.question_answer_box {
width: 350px;
padding-left: 100px;
}
.answer {
position: relative;
bottom: 45px;
}
.question {
margin-left: 5px;
}
.answer_text {
width: 100px;
}
.answer_list_item {
list-style: none;
}
#background_stretch {
background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg_repeat.png') repeat-y scroll 0 0;
display: block;
height:auto;
padding-left: 8.5px;
}
#background_bottom {
background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg_bottom.png') no-repeat scroll;
display: block;
height: 90px;
width: 520px;
padding-left: 4px;
padding-top: 20px;
}
#bottom_section {
position: relative;
}
#invite_button {
background: transparent url('<?php echo img_path(); ?>feedback/question/invite_button.png') no-repeat scroll;
display: block;
height: 52px;
width: 512px;
position: relative;
}
De toute façon, que vous devriez être en mesure de voir, c'est mon background_stretch et question_background div qui s'étend avec le contenu, tout cela fonctionne bien et si je change la hauteur de question_background tout bouge comme il se doit.
Cependant, il se question_background pour ajuster c'est le contenu interne de la hauteur qui est le problème pour moi.
J'ai essayé différentes versions de claire:à la fois flottante et les différentes cases, en vain...ai-je trop compliqué?
Ce que je fais mal? Comment puis-je y parvenir?
D'apprécier l'aide que je reçois.
source d'informationauteur lionysis | 2011-04-28
Vous devez vous connecter pour publier un commentaire.
À faire élément "extensible" au lieu de
height: auto;
vous devez utiliseroverflow: auto;
(lorsque vous modifiezfloat
). Mais quand vous ne touchez pas à la hauteur, il va automaticlly fit - @kokos dit. BTW: Div Qui vous voulez faire extensible? (Si j'ai deviné juste, vous voulez faire de la div avecfeedback_question
classe)Astuce: Ajouter votre code pour JsFiddle
#question_background
a une hauteur, si elle a une hauteur fixe il ne changera jamais, peu importe combien de temps le contenu à l'intérieur.Aussi, la prochaine fois que vous affichez une grande quantité de code veuillez utiliser jsfiddle.net afin que nous puissions tester plus facile.