0

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

这是侧边栏的 CSS（如果我需要发布更多代码，请告诉我）：

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

我仍在努力学习，因此将不胜感激。提前致谢！

4

3 回答 3

2

您正在寻找的是一个 CSS 列。有几个选项可以使用设置三列布局或两列布局的 CSS 包装器。我建议您访问以下网站：

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

或者，如果您使用 CSS3 标记，那么您也可以使用 display:table 和 display:table-cell 标记来设置列。请参考本站：

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-09T14:35:19.547 回答
0

您可以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>

updateView()继续_<body onload="updateView()">

于 2012-04-09T14:34:50.303 回答
0

如果你有一个 DIV 元素作为你的侧边栏，具有固定的宽度，它会根据你内容的大小自动垂直拉伸。

让我把钱放在嘴边：http: //jsfiddle.net/alexpeta/NkHY5/

于 2012-04-09T14:43:14.540 回答