我有一个ASP.NET MVC视图,其中包含以下Twitter Bootstrap：

<div>
    <div>
        [Header content]
    </div>

    <div>
        <div>
            <div>
                [Main Content]
            </div>
        </div>

        <div id="right-sidebar">
            [Right Sidebar Content]
        </div>
    </div>
</div>

我的问题是我的[主要内容]比我的[右侧边栏内容]高得多.由于我的[右侧边栏内容]具有不同的背景颜色,我希望它一直向下到我的页脚(我的[主要内容]的完整高度.)

我尝试将高度：100％设置为侧边栏但在Chrome中没有明显效果.谁能看到如何实现这一目标？

我改变了一点结构和元素的类/ ID.

<div>
    <div>
        [Header content]
    </div>

    <div id="parent">
        <div>
                [Main Content]
        </div>
        <div id="right-sidebar">
            [Right Sidebar Content]
        </div>
    </div>
</div>

而现在的CSS：

#parent{
  position: relative
}

#right-sidebar{
  position: absolute;
  right: 0;
  height: 100%;
  background: blue;
}

.main-content{
  background: red;
}

嗯，大家都知道Twitter的Bootstrap是一个很好的工具，对于像我这样对CSS不太了解的人来说，很多事情变得更容易。但是，有时也可能是一个问题。

事情是：我正在使用一个固定的940px宽，12列网格中心的布局与两列，我希望两个列具有相同的高度。现在的代码是这样的：

<div>
    <div>
        <div>
            <div>
                <div>
                    <div id="notWrap">
                        <div id="not">
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div id="myPWrap">
                        <div id="myP">
                        </div>
                    </div>
                    <hr />
                    <div id="otherPWrap">
                        <div id="otherP">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer id="bottom">
        <p>&copy;</p> 
    </footer> 
</div>

如你所见，有没有内容的div，如“myP”，“otherP”和“not”。它们通过Javascript填充，并且存储在其中的内容的数量可能会有所不同，因此，在许多时候，列(这里的“列”由div表示，“div-content”类和div与“div-sidebar”类)将大于另一个(在特定情况下，两列可能是“较大的”)。

这是一张照片，如果它有帮助：

基本上，代码中的左列(< div class =“span8 div-content”>)需要与右列的大小相同(< div class =“span4 div-sidebar”> in代码)，反之亦然。另外，如果有帮助，黄色部分是< div class =“content”>白色背景是< div class =“container”>。 < div class =“row”>只是两列的容器，没有颜色。

我知道“高度相同”的问题是网络程序员的一个常见问题，但是我迄今为止所尝试的解决方案没有奏效。我真的不喜欢“Faux Column解决方案”，因为我是CSS中的新手，所以我不想像这样一个解决方案。如果可能，我宁愿坚持纯CSS。

提前，感谢那些愿意帮助的人。

一直为我工作的是：

#myPWrap,#otherPWrap {
  overflow:hidden;
}

#myP,#otherP {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

您还可以尝试将包装转换成表，将#myP转换为表格列。

#myPWrap,#otherPWrap {
 display: table;
}

#myP,#otherP {
 display: table-cell;
}

基本上我有几个输入字段，其中有一些文本，
当我尝试设置col-lg-4和col-lg-8在input-group-addon和输入字段本身时，它不会做我想要做的和调整它们的大小。

<div>
   <span>some text</span>
   <input type="text"id="current_pwd" name="current_pwd" />
</div>

任何人都可以帮助我获得input-group-addon获得相同的大小
我在这里创建一个小提琴：
http://jsfiddle.net/Dzhz4/
这解释了我的问题。

任何可以散发一些光的人吗？

尝试这个

http://jsfiddle.net/Dzhz4/1/

.input-group-addon {
    min-width:300px;// if you want width please write here //
    text-align:left;
}

有可能得到两列柱数据长度不一样的流体柱孔。

这是一个响应式的CSS解决方案，其基础是为每列添加一个大的填充和一个相等的负余量，然后将整个行包含在一个隐藏的溢出的类中。

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}

.col-wrap{  
overflow: hidden;   
}

你可以看到它在jsFiddle工作

编辑

如果您想要相等的高度井或圆角的列，则会有变化：
http://jsfiddle.net/panchroma/4Pyhj/

编辑

另一个变体具有相同高度的孔或具有圆角的列，此时为Bootstrap 3
http://jsfiddle.net/panchroma/D4xdE/

它或多或少与Bootstap 2相同，但是通过一些改进来适应BS如何空间排列列网格的变化。

我使用bootstrap，我发现文本字段的高度太小。它就像小于10px。我想知道如果它是小或我犯了一些错误。

我使用firebug检查文本区域。它的高度是18px，这似乎不可能为我…，我得到的是相同的，我从这里来的.Text area from bootstrap example.It让我很困惑…
我得到的是

input,textarea,select,.uneditable-input {
  border: 1px solid #CCCCCC;
  border-radius: 3px 3px 3px 3px;
  color: #555555;
  display: inline-block;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
  margin-bottom: 9px;
  padding: 4px;
}

高度说它是18px，但它不是…
有人可以帮助吗？

添加<！DOCTYPE HTML>应该解决这个问题。同样的问题在这里问： text input rendering issue with twitter bootstrap.css