Twitter 自举100%高度

我正在使用asp.net 4.0和bootstrap创建一个小部件页面，该页面将在各种不同的屏幕上访问，因此我需要让主要内容根据屏幕大小对增长/收缩做出响应

我当前的代码与此类似-

<div class="container-fluid">
        <div class="row header">
           HEADER ROW
        </div><!--/.row-->

        <div class="row">
         MAIN CONTENT 
        </div

        <footer>
           FOOTER GOES HERE
        </footer>

    </div><!--/.container-fluid-->

标题行
主要内容
您可以使用flex box进行此操作

div.wrapper {
  background:green;
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  border-bottom:1px solid black;
  flex: 0 1 100px;
}

div.main {
  flex: 1 1 auto;
}

footer {
  border-top:1px solid black;
  flex: 0 1 100px;
}

例如：
我从经验中知道，如果没有引导，您需要给
HTML
和
BODY
元素一个
100%
的高度，然后才能将其交给
包装器
元素，但我不知道引导是否会更改这些规格。您在发布此问题之前搜索过答案吗？这个问题和类似的问题已经被回答了很多次了。您好-谢谢您的回答，但似乎是因为HTML/Body，我只希望主内容行能够响应高度。页眉和页脚可以指定为100px。您尝试过该解决方案吗？这适用于你给我的整个页面结构。如果可以将周围元素的高度设置为应有的高度，flex box解决方案仍然有效。中间的元素是高度响应的，其他元素似乎“粘”在页面的顶部和底部。抱歉-看起来不一样，我知道它没有正确加载。您是否可以向此行添加一个标记，并将其扩展到行高的100%？
display:flex
和
flex flow:column
是您希望组件位于其中的任何div上的周围标记，
flex:1 1 auto
使高度100%相对于该高度，因此在
井
分级
div
元素上使用该高度。稍微玩玩一下这些，然后阅读关于flex flow的w3schools教程。如果您不确定显示教程的作用，请从它开始。PS：请投票，如果这对您有帮助，并接受它是否解决了您最初的问题。如果您下次在JSFIDLE中提供代码，我们将更容易帮助您。