如何让侧边栏自动伸展

我有，我估计，是一个简单的问题。我在页面上有一个侧边栏，它有自己独特的颜色，我希望它根据主要内容区域中的文本进行增长和缩小，以便从导航栏延伸到页脚。我试图设置一个高度，但这只是迫使整个内容区域底部有大量的空白区域。我希望侧栏的高度由主区域中的内容量决定。如何让侧边栏自动伸展

这里是侧边栏的CSS（如果我需要发布更多的代码，请让我知道）：

.LeftSidebar 
{ 
float: left; 
background-color: #1b619c; 
color: White; 
width: 175px; 
text-align: center; 
padding: 20px; 
clear:both; 
}

我仍然努力学习，因此任何帮助，将不胜感激。提前致谢！

来源

2012-04-09 Peter

宽度应在％，否则它可能导致变化不同分辨率/浏览器。请张贴一些示例HTML。 – Pankaj 2012-04-09 14:36:06

尝试删除宽度并检查 – Ravia 2012-04-09 14:35:10

你所寻找的是一个CSS列做updateView()。有几个选项可以用css包装器来设置三列布局或两列布局。我会向您推荐以下网站：

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

或者，如果你正在使用CSS3标记，那么你也可以使用显示：表并显示：表细胞标记来设置列。请参阅本网站

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

div#ContentWrapper { display: table; } 
div#LeftSidebar { display: table-cell; } 
div#MainContent { display: table-cell; }

我显示的ID，因为你应该使用一个类的唯一时间是当有在同一页上为该类多个引用。

然而，它会比修改侧边栏列的CSS更复杂一点。

来源

2012-04-09 14:35:19 CBRRacer

你可以设置height:100%或调整高度取决于显示器（屏显示器）大小的直通jQuery的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
function updateView() 
    { 
     var obj = $(".LeftSidebar"); 
     var sc_size = $(window).height() 

     var obj_height = sc_size - 90 //90 is example of footer os smthg else height 

     $(".LeftSidebar").css({'height': obj_height}); 
    } 
</script>

上<body onload="updateView()">

来源

2012-04-09 14:34:50

如果您有一个DIV元素作为您的侧边栏，具有固定宽度，它将自动垂直拉伸，具体取决于您的内容大小。

，让我把钱用在我的嘴是：http://jsfiddle.net/alexpeta/NkHY5/

来源

2012-04-09 14:43:14

我的整个侧边栏都被包裹在一个div中，但它只能向下延伸至侧栏中的文本，而不是主要内容的范围。 – Peter 2012-04-09 14:45:30

然后据我所知，在你的情况下，你需要用jquery计算你的高度：$（window）.height（） – 2012-04-09 14:47:51

如何让侧边栏自动伸展

回答

相关问题