Image 重复（垂直）在divs中不起作用

我目前正在用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>

但是，当我在DIV

id=“form\u output”

中输入一些内容时，DIV

class=“left\u dyn”

和

class=“right\u dyn”

的高度会增加，但bakcground图像不会垂直重复：(

---

我的印象是，我看不到有那么多树的树林。

好的，我找到了一个解决办法：

正如我上面提到的，问题是您的left_dyn和right_dyn列没有使用表单输出div展开。解决问题的一个方法是在这两个div上设置以下css规则：

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

这将基本上扩展left_dyn/right_dyn div，以匹配表单输出div的高度

然后必须在父容器上设置，因为这将隐藏任何溢出：

overflow: hidden;

我尝试在您的页面上编辑此内联，注意到除了页脚有问题外，它还能正常工作。这可以通过将页脚置于父包装的外部来轻松解决

---

我已经制作了一个快速演示，解释了这里的效果：

好的，我找到了一个解决方案：

正如我上面提到的，问题是您的left_dyn和right_dyn列没有使用表单输出div展开。解决问题的一个方法是在这两个div上设置以下css规则：

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

这将基本上扩展left_dyn/right_dyn div，以匹配表单输出div的高度

然后必须在父容器上设置，因为这将隐藏任何溢出：

overflow: hidden;

我尝试在您的页面上编辑此内联，注意到除了页脚有问题外，它还能正常工作。这可以通过将页脚置于父包装的外部来轻松解决

---

我在这里制作了一个快速的演示来解释效果：

@C.Felix这是一个非常好的主意，因为现在没有人使用

表格来创建网站。因为搜索引擎不会抓取表格网站或抓取速度慢。所以总是尝试创建无表格设计，这对SEO目的很好

你可以从这个网站在线学习：
@C.Felix这是一个非常好的主意，因为现在没有人使用
表格来创建网站。因为搜索引擎不会抓取表格网站或抓取速度慢。所以总是尝试创建无表设计，这对SEO目的很好

你可以从这个网站在线学习：
你确定这是因为那些div中没有任何元素吗？div只会增长到元素的大小，因此如果没有任何元素，就不需要平铺。我明白你的意思！但是我如何才能改变这一点呢？我尝试了几种方法，但它总是会打破设计再次重复。你有一个例子/url我们可以看吗？这是有问题的网站，文本是德语的，希望不会打扰你。啊哈，我现在看到了问题。这是因为左/右不随内容扩展。另一种方法是去掉左/右，并在表单输出div-th上设置背景图像在这种情况下，背景图像总是随着内容的高度平铺。值得研究一下“假列”：你确定这是因为这些div中没有任何内容吗？div只会增长到元素的大小，所以如果没有任何内容，就不需要平铺。我明白你的意思了！但是我该怎么做呢我尝试了几种方法，但总是一次又一次地破坏设计。你有没有一个例子/url我们可以看看？这是有问题的网站，文本是德语的，希望不会打扰你？啊哈，我现在看到了问题。这是因为左/右不随内容扩展。另一种方法是删除left_dyn/right_dyn并将背景图像设置在form_output div上-这样背景图像将始终随内容的高度平铺。值得一看的是“假列”：没问题，很高兴它有帮助：-）-我编辑了上面的回复，包括一个演示，为您提供一个我的意思示例谢谢，这非常有帮助，我马上就把它保存了下来，以备将来再遇到类似的情况：）没问题，很高兴它有帮助：-）-我编辑了上面的回复，加入了一个演示，给你一个我的意思的例子。谢谢，这是非常有帮助的，我马上就把它保存起来，以备将来遇到类似的情况：）