我有一个ASP.NET MVC视图,其中包含以下Twitter Bootstrap：
- <div class="container">
- <div class="container-fluid header">
- [Header content]
- </div>
- <div class="row-fluid">
- <div class="span9">
- <div class="container-fluid main-content">
- [Main Content]
- </div>
- </div>
- <div id="right-sidebar" class="span3">
- [Right Sidebar Content]
- </div>
- </div>
- </div>
我的问题是我的[主要内容]比我的[右侧边栏内容]高得多.由于我的[右侧边栏内容]具有不同的背景颜色,我希望它一直向下到我的页脚(我的[主要内容]的完整高度.)
解决方法
我改变了一点结构和元素的类/ ID.
- <div class="container-fluid">
- <div class="row-fluid header">
- [Header content]
- </div>
- <div id="parent" class="row-fluid">
- <div class="span9 main-content">
- [Main Content]
- </div>
- <div id="right-sidebar" class="span3">
- [Right Sidebar Content]
- </div>
- </div>
- </div>
而现在的CSS：
- #parent{
- position: relative
- }
- #right-sidebar{
- position: absolute;
- right: 0;
- height: 100%;
- background: blue;
- }
- .main-content{
- background: red;
- }
