html - 无法滚动标签内容并将高度保持在 100%

Question

我想让选项卡内容可滚动并且高度为 100%。

有很多关于如何在固定高度容器中执行此操作的示例，但我希望滚动窗口能够对窗口大小调整和分辨率使用react。

基本问题:如果你想滚动标签内容你需要设置一个高度，如果查看浏览器的分辨率小于设置的高度，内容将被截断。

我有一个例子:

https://jsfiddle.net/wsadeh/4r5ye65x/2/

有什么方法可以让高度100%吗？

<div class="container">
  <div class="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
      <li class="active">
       <a href="#tos" data-toggle="tab">TOS</a>
      </li>
      <li>
        <a href="#privacy" data-toggle="tab">POS</a>
      </li>
    </ul>
    <div id="my-tab-content" class="tab-content">
      <div class="tab-pane active" id="tos">
        TOS... lots of text
      </div>
      <div class="tab-pane" id="privacy">
        POS... lots of text
      </div>
    </div>
  </div>
</div>

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
.container {
  width: 100%;
  height: 100%;
  padding: 0px;
/* overflow works here, but scrolls page including tabs 
   overflow: auto; */
}
.tab-content{
/* this is where you would scroll only the content */
overflow:auto;  
/* need some kind of height - 100% doesn't work if you have a height like 600px and your resolution is smaller then content gets cut off */
height: 600px;
}

Answer 1

如果选项卡内容上方的内容是固定高度，您可以使用具有视口(viewport)高度 (vh) 单位的 CSS calc 方法。

.tab-content{
/* this is where you would scroll only the content */
overflow:auto;  
height: calc(100vh - 42px); /* Replace 42px with the needed height. 100vh means the whole height of the browser's viewport */
height: -webkit-calc(100vh - 42px);
height: -moz-calc(100vh - 42px);
}

工作 fiddle :https://jsfiddle.net/6wt3hs15/1/ 请注意，calc 函数中的像素值需要是标签内容上方所有内容的像素高度。

编辑:为了获得最大的兼容性，您可能还想包含 calc 函数的前缀版本。编辑代码以反射(reflect)这一点。