it-swarm.com.ru

Расширяемая высота DIV для внутреннего содержимого - что я делаю не так?

Обновление

Решил это, это была самая внутренняя часть div, нуждающаяся в автоматической высоте, так как она имела фиксированную высоту, которую я полностью пропустил


Я - как и многие другие, которые я искал и нашел - пытался создать расширяемый 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>

А вот и мой 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;

}

В любом случае, как вы должны видеть, это мои div-элементы background_stretch и question_background растягиваются с содержимым, все это работает хорошо, и если я изменяю высоту question_background, все движется, как и должно. Тем не менее, он заставляет question_background подстраиваться под высоту своего внутреннего содержимого, что является проблемой для меня.

Я пробовал разные версии ясно: и плавающие, и разные коробки, но все безрезультатно ... Я слишком усложнил?

Что я делаю неправильно? Как мне этого добиться?

Ценю любую помощь, которую я получаю.

10
lionysis

Чтобы сделать элемент "расширяемым" вместо height: auto;, вы должны использовать overflow: auto; (при изменении float ). Но когда вы не будете касаться высоты, она автоматически подгонится - как сказал @kokos. Кстати, какой Div вы хотите сделать расширяемым? (Если я угадала, вы хотите сделать div с классом feedback_question)

Полезный совет: добавьте свой код в JsFiddle

16
Robik

#question_background имеет высоту, если он имеет фиксированную высоту, он никогда не изменится, независимо от того, как долго содержимое внутри него.

Кроме того, в следующий раз, когда вы публикуете такой большой объем кода, используйте jsfiddle.net , чтобы мы могли легче тестировать.

0
Kokos