html - 带边框的液体假柱

Question

我正在设计一个 2 列的 HTML5 界面（向后兼容性并不重要，所有用户都将使用最新的 Chrome/FF），左侧是侧边栏，右侧是主要内容区域。

我希望侧边栏具有背景颜色和右边框（类似于 OS X Finder 侧边栏）。我希望该背景和边框扩展到页面底部，即使页面内容不足以将页面扩展到该大小。我还希望将侧边栏设置为百分比，而不是设置的像素数量。

通常，在这种情况下，我会使用人造柱，甚至是液体人造柱。但是我想在列的右侧有一个边框，我不确定这是否/如何可能。

理想情况下，我完全可以在没有图像/人造列的情况下完成所有这些工作。是否有允许这样做的 CSS3/HTML5 功能（正如我所说，向后兼容性不是问题）？如果没有，除了将侧边栏设置为固定大小之外，还有其他解决方案吗？

Answer 1

I think this demonstrates what you're looking for. If you have any questions about how this example works, don't hesitate to ask! :)

http://www.thechoppr.com/2009/02/09/2-column-fluid-layout-100-height-with-leftright-sidebar

Answer 2

嗯……那个？

<style type="text/css">
  #left
  { height:100%;
    width:25%;
    min-width: 100px;
    float:left;
    background-color:red;
    border-right:solid 3px orange;
  }
</style>
<div id="left">menu</div>
<div id="right">contents</div>

Answer 3

你可以使用一些 jQuery：

var sidebar_height = 0;
var content_height = 0;

sidebar_height = $("#sidebar").height();
content_height = $("#content").height();
if(sidebar_height > content_height){
    $("#content").css("height", sidebar_height);
} else {
    $("#sidebar").css("height", content_height);
}