Html 可扩展的 DIV 高度以适应内部内容 - 我做错了什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5819201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expandable DIV height to fit internal content - what am I doing wrong?
提问by lionysis
Update
更新
Solved this, it was the inner most div needing to have auto height, as it had a fixed height that I'd completely overlooked
解决了这个问题，它是需要自动高度的最里面的 div，因为它有一个我完全忽略的固定高度
I have - like many others I have searched and found - tried to make an expandable DIV that expands based on the length of it's contents. Mine is a little different from those I have seen so far, as I have variables coming from external Controllers to display, but aside from this what I am trying to achieve is the same. I have created a DIV that contains an image that I repeat-y in the background, however the internal content DIV doesn't want to expand. I will post my code for some clarity -
我 - 就像我搜索和发现的许多其他人一样 - 试图制作一个可扩展的 DIV，它可以根据其内容的长度进行扩展。我的与我目前看到的有点不同，因为我有来自外部控制器的变量来显示，但除此之外，我想要实现的目标是相同的。我创建了一个包含我在背景中重复的图像的 DIV，但是内部内容 DIV 不想扩展。为了清楚起见，我将发布我的代码 -
<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>
And here is my CSS -
这是我的 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;
}
Anyway, as you should be able to see, it is my background_stretch and question_background div's that stretches with the content, this all works well and if I change the height of question_background everything moves as it should. However, it's getting question_background to adjust to it's internal contents height that is the problem for me.
无论如何，正如您应该能够看到的，是我的 background_stretch 和 question_background div 与内容一起延伸，这一切都很好，如果我更改 question_background 的高度，一切都会按原样移动。然而，它让 question_background 适应它的内部内容高度，这对我来说是个问题。
I have tried various versions of clear:both and floating different boxes, all to no avail...have I overcomplicated it?
我尝试了各种版本的 clear:both 和浮动不同的盒子，但都无济于事......我是否过于复杂了？
What am I doing wrong? How do I achieve this?
我究竟做错了什么？我如何实现这一目标？
Appreciate any help I receive.
感谢我收到的任何帮助。
回答by Robik
To make element "extendable" instead of height: auto;you should use overflow: auto;(when you change float). But when you won't touch height it will automaticlly fit - as @kokos said. BTW: Which Div you want to make extendable? (If i guessed right you want to make div with feedback_questionclass)
要使元素“可扩展”而不是height: auto;您应该使用overflow: auto;（当您更改时float）。但是当你不接触高度时，它会自动适应 - 正如@kokos 所说。BTW：你想让哪个 Div 可扩展？（如果我猜对了，你想用feedback_question课堂制作 div ）
Useful hint: Add your code to JsFiddle
有用的提示：将您的代码添加到JsFiddle
回答by Kokos
#question_backgroundhas a height, if it has a fixed height it will never change no matter how long the content inside it.
#question_background有一个高度，如果它有一个固定的高度，无论里面的内容有多长，它都不会改变。
Also, next time you are posting such an extensive amount of code please use jsfiddle.netso we can test easier.
另外，下次您发布如此大量的代码时，请使用jsfiddle.net，以便我们可以更轻松地进行测试。
