Html 双窗格网站-拉伸垂直高度？

我有这样的布局：

顶杆是固定的。然后我想在左窗格中有一个侧边栏，在右窗格中有一个主要内容。窗格有不同的颜色，并用边框隔开

问题是，有时左窗格会更高，有时右窗格会更高。因此，一个窗格比另一个窗格短（颜色结束，您会看到白色）

我试过身高：100%但这仅在内容短于浏览器高度时有效

---

仅使用CSS如何解决此问题？

您可以使用一种称为“人造列”的技术。一个很好的例子是Wex在下面的评论中添加的方法3。

您可以使用一种称为“人造柱”的技术。一个很好的例子是上的方法3，或者正如Wex在下面的评论中添加的那样。

您可以尝试类似的方法。唯一的问题是您需要知道一个固定的高度，如果一个列可能比另一个列大，并且无法知道哪个列会更大，那么您可能需要执行一些jquery来计算它

---

你可以试试这样的东西。唯一的问题是您需要知道一个固定的高度，如果一个列可能比另一个列大，并且无法知道哪个列会更大，那么您可能需要执行一些jquery来计算它

---

我解决这个问题的方法是通常嵌套列，以便一列控制另一列，然后给另一列一个背景图像，看起来像是第一个继续：

    <style>
    *{margin:0;padding:0;}
    .main_con{position:relative;margin:0 auto;width:960px;}
    .head_con{position:fixed;top:0;width:960px;height:42px;background:#ff0;}
    .col_con{padding:42px 0 0 0;}
    .left_col{width:360px;margin: 0 15px 0 0;float:left;background: #f60;}
    .right_col{position:relative;float:left;width:960px;background: #f00 url("image that looks like left column continued") repeat-y;}
    .right_col_content{float:left;width:585px;}
    .clr{clear:both;}
    </style>

*{边距：0；填充：0；}
.main_con{位置：相对；边距：0自动；宽度：960px；}
.head_con{位置：固定；顶部：0；宽度：960px；高度：42px；背景：#ff0；}
.col_con{padding:42px 0；}
.left_col{宽度：360px；边距：0 15px 0；浮点：左；背景：#f60；}
.right_col{position:relative；float:left；width:960px；background:#f00url（“看起来像左列的图像继续”）repeat-y；}
.right_col_content{float:left；width:585px；}
.clr{clear:两者；}

对于html：

    <div class="main_con">
        <div class="col_con">
            <div class="right_col">
                <div class="left_col">
                        <p>left column content pushes right column down</p>    
                </div>
                    <div class="right_col_content">
                        <p>right column content</p>
                    </div>
            <br class="clr" />
            </div>
        </div>
        <div class="head_con">
            <p>head content</p>
        </div>
    </div>

左栏内容向下推右栏

右栏内容

---

注：{}剥离仅用于示例目的，应替换为css的适当默认剥离位。

我解决此问题的方法是正常嵌套列，以便一列控制另一列，然后为另一列提供一个背景图像，看起来就像是第一个继续：

    <style>
    *{margin:0;padding:0;}
    .main_con{position:relative;margin:0 auto;width:960px;}
    .head_con{position:fixed;top:0;width:960px;height:42px;background:#ff0;}
    .col_con{padding:42px 0 0 0;}
    .left_col{width:360px;margin: 0 15px 0 0;float:left;background: #f60;}
    .right_col{position:relative;float:left;width:960px;background: #f00 url("image that looks like left column continued") repeat-y;}
    .right_col_content{float:left;width:585px;}
    .clr{clear:both;}
    </style>

*{边距：0；填充：0；}
.main_con{位置：相对；边距：0自动；宽度：960px；}
.head_con{位置：固定；顶部：0；宽度：960px；高度：42px；背景：#ff0；}
.col_con{padding:42px 0；}
.left_col{宽度：360px；边距：0 15px 0；浮点：左；背景：#f60；}
.right_col{position:relative；float:left；width:960px；background:#f00url（“看起来像左列的图像继续”）repeat-y；}
.right_col_content{float:left；width:585px；}
.clr{clear:两者；}

对于html：

    <div class="main_con">
        <div class="col_con">
            <div class="right_col">
                <div class="left_col">
                        <p>left column content pushes right column down</p>    
                </div>
                    <div class="right_col_content">
                        <p>right column content</p>
                    </div>
            <br class="clr" />
            </div>
        </div>
        <div class="head_con">
            <p>head content</p>
        </div>
    </div>

左栏内容向下推右栏

右栏内容

---

注：{}剥离仅用于示例目的，应替换为css的适当默认剥离位。

是否可以发布您正在使用的css？是否尝试设置最小高度值？如果元素的容器没有固定高度，则将元素设置为100%高度将不起作用。@motoxer4533发布的人造列技术是一个很好的解决方法。您可以发布您正在使用的css吗？您是否尝试设置最小高度值？如果元素的容器没有固定高度，则将元素设置为100%高度将不起作用。@motoxer4533发布的人造柱技术是一个很好的解决方法。我非常喜欢上的文章。我非常喜欢上的文章。