Question

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

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

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

理想情况下，我可以完全没有图像/虚拟列。是否有CSS3 / HTML5功能可以实现（正如我所说，向后兼容性不是问题）？如果没有，除了使侧边栏固定尺寸外，还有其他解决方案吗？

Answer 1

我认为这证明了你在寻找什么。如果您对此示例的工作方式有任何疑问，请随时提出！：）

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);
}

带边框的液体人造柱

3 个答案: