Повтор (по вертикали) не работает в div

В настоящее время я тестирую несколько вещей с DIV вместо того, чтобы всегда использовать таблицы.

Поэтому я создал небольшой дизайн, например:

<div id="container">
    <div id="header"><h1>Header of the page</h1></div>
    <div style="width: 27px; float: left;"><img src="style/images/top_left_corner.jpg" alt="" /></div>
    <div style="width: 859px; float: left;"><img src="style/images/top_bar.jpg" alt="" /></div>
    <div style="width: 28px; float: left;"><img src="style/images/top_right_corner.jpg" alt="" /></div>
    <div style="width: 27px; float: left;"><img src="style/images/left_vert_bar1.jpg" alt="" /></div>
    <div style="width: 859px; float: left;">
        <div id="top_content">
            <div id="explanation">
                <span>Some text comes here</span>
            </div>

            <div id="form">
                <form method="post" action="index.php" enctype="multipart/form-data">
                    <label for="file">File:</label>
                    <input type="file" name="datei" size="40" maxlength="100000" />&nbsp;<input type="submit" name="sub" value="Submit" />
                </form>
            </div>
        </div>
    </div>
    <div style="width: 28px; float: left;"><img src="style/images/right_vert_bar1.jpg" alt="" /></div>
    <div class="left_dyn">&nbsp;</div>
        <div id="middle_content">
            <div id="form_output">Here is the outcome of the Form</div>
        </div>
    <div class="right_dyn">&nbsp;</div>
    <div style="width: 27px; float: left; clear: left;"><img src="style/images/left_vert_bar2.jpg" alt="" /></div>
    <div id="placeholder">&nbsp;</div>
    <div style="width: 28px; float: left;"><img src="style/images/right_vert_bar2.jpg" alt="" /></div>
    <div style="width: 27px; float: left;"><img src="style/images/bottom_left_corner.jpg" alt="" /></div>
    <div style="width: 859px; float: left;"><img src="style/images/bottom_bar.jpg" alt="" /></div>
    <div style="width: 28px; float: left;"><img src="style/images/bottom_right_corner.jpg" alt="" /></div>
    <div id="footer"><span>Some Footer Text</span></div>
</div>

Теперь DIVs с class="left_dyn" а также class="right_dyn" показать фоновое изображение, которое было настроено в моем файле CSS и должно повторяться по вертикали, когда в DIV есть какой-то контент id="form_output"

Вот как class="left_dyn" а также class="right_dyn" выглядеть в файле CSS:

/* Dyn Design */
.left_dyn {
         background: url('../images/left_dyn_bar.jpg') repeat-y scroll;
         width: 27px;
         float: left;
}

.right_dyn {
         background: url('../images/right_dyn_bar.jpg') repeat-y scroll; 
         width: 28px;
         float: left;
}

Однако, когда я ввожу некоторый контент в DIV id="form_output"ДИВ class="left_dyn" а также class="right_dyn" рост в высоту, но изображение bakcground не повторяется по вертикали:(

У меня сложилось впечатление, что я не вижу лес со всеми этими деревьями.

Источник

2 ответа

Решение

Хорошо, я нашел решение:

Как я уже говорил выше, проблема в том, что ваши столбцы left_dyn и right_dyn не расширяются с помощью div_output form_output. Одним из решений проблемы является установка следующих правил CSS для этих двух элементов div:

padding-bottom: 32000px; /* Arbitrary number big enough to cover expanding content */
margin-bottom: -32000px;

Это в основном расширит div-элементы left_dyn / right_dyn в соответствии с высотой вашего div-элемента form_output.

Затем вам нужно будет установить родительский контейнер, так как это позволит скрыть любое переполнение:

overflow: hidden;

Я попытался отредактировать эту строку на вашей странице и заметил, что она работает, за исключением проблемы с нижним колонтитулом. Эту проблему можно легко решить, переместив нижний колонтитул за пределы родительской оболочки.

Я сделал короткую демонстрацию, объясняющую эффект здесь: http://jsfiddle.net/mWLL9/

Источник

@C.Felix Это очень хорошая идея, потому что сейчас дни никто не использует table создать сайт. Потому что поисковая система не сканирует веб-сайт и не сканирует медленно. Поэтому всегда старайтесь создавать менее настольный дизайн, это хорошо для целей SEO.

Вы можете учиться онлайн с этого сайта: http://www.w3schools.com/

Источник
Другие вопросы по тегам