javascript - 如何在移动设备中将 Bootstrap 中的控件设置为全高(带滚动、固定页眉/页脚)

Question

在 Bootstrap Web 应用程序中使用我的 JQuery 控件(IOS 样式列表)时，我需要该控件在任何移动尺寸上占据全屏高度(减去页眉和页脚)。

JSFiddle:http://jsfiddle.net/TrueBlueAussie/46y43/1/

/*
  Live control Javascript not required for this example
  Note: I pasted my bootstrap CSS into the JSFiddle CSS panel,
  hence the large amount of styling. 
  (My styling is at the bottom).
*/

它看起来应该类似于下图，但目前控件的高度是硬连线的，因此如果您调整控件的大小，控件会超出窗口并且页脚会丢失:

高度需要 100% 减去标题，最好符合 Bootstrap 。我在 Bootstrap 中找到的固定高度的唯一其他答案不适应大于屏幕高度的内容区域。这似乎是 CSS 中的缺陷，因此欢迎提出建议/改进(我真的很怀念 Silverlight 布局!)。

如果在小浏览器窗口中显示，解决方案应该避免任何浏览器滚动条。

我添加了 JQuery/Javascript 标签，以防唯一的解决方案是某种形式的动态调整大小，但首选 CSS 解决方案(必须支持所有主要浏览器)。

Answer 1

fiddle :http://jsfiddle.net/46y43/2/

CSS:

.navbar-header{height:50px;}

@media screen and (max-width: 768px) {
  html {
      height:100%;
  }
    body{
        height:100%;
    }
    .container.body-content{
        height:100%;
        margin-top:-50px;
        padding-top:50px;
    }
     .container.body-content .row{
        height:100%;
    }
    .col-md-8.col-md-offset-2.col-sm-12{
    height:100%;
    }
    .col-md-8.col-md-offset-2.col-sm-12 .row{
    height:100%;
    }
    .ListView-Wrapper{
    height:100%;
        min-height:100%;
    }
}

减少:

@navheight : '50px';


.navbar-header{height: @navheight ;}

@media screen and (max-width: 768px) {
  html {
      height:100%;
  }
    body{
        height:100%;
    }
    .container.body-content{
        height:100%;
        margin-top: -@navheight;
        padding-top: @navheight;
    }
     .container.body-content .row{
        height:100%;
    }
    .col-md-8.col-md-offset-2.col-sm-12{
    height:100%;
    }
    .col-md-8.col-md-offset-2.col-sm-12 .row{
    height:100%;
    }
    .ListView-Wrapper{
    height:100%;
        min-height:100%;
    }
}