Cập nhật
Giải Quyết này, đó là khu vực nội nhất div cần phải có chiều cao tự động, vì nó đã có một chiều cao cố định mà tôi muốn hoàn toàn bị bỏ quaChiều cao DIV có thể mở rộng để phù hợp với nội dung nội bộ - tôi đang làm gì sai?
Tôi đã - như nhiều người khác tôi đã tìm kiếm và được tìm thấy - đã cố gắng tạo DIV có thể mở rộng mở rộng dựa trên độ dài của nội dung. Tôi là một chút khác với những gì tôi đã thấy cho đến nay, như tôi có các biến đến từ bộ điều khiển bên ngoài để hiển thị, nhưng ngoài những gì tôi đang cố gắng đạt được là như nhau. Tôi đã tạo một DIV chứa hình ảnh mà tôi lặp lại trong nền, tuy nhiên nội dung DIV nội dung không muốn mở rộng. tôi sẽ gửi mã của tôi đối với một số rõ ràng -
<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>
Và đây là CSS của tôi -
.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;
}
Dù sao, như bạn sẽ có thể nhìn thấy, nó là background_stretch của tôi và div của câu hỏi_background trải dài với nội dung, tất cả đều hoạt động tốt và nếu tôi thay đổi chiều cao t của question_background tất cả mọi thứ di chuyển như nó cần. Tuy nhiên, nó nhận được question_background để điều chỉnh chiều cao nội dung nội bộ là vấn đề đối với tôi.
Tôi đã thử các phiên bản rõ ràng khác nhau: cả hai hộp nổi và khác nhau, tất cả đều không có ích ... tôi có quá tải không?
Tôi đang làm gì sai? Làm thế nào để đạt được điều này?
Đánh giá cao bất kỳ trợ giúp nào tôi nhận được.
Nếu bạn có thể chuyển đổi này vào một ví dụ tĩnh trên một trang web như jsfiddle.net thì chúng ta có thể lấy lại cho bạn với các bản sửa lỗi cụ thể. – Gareth