Question

我希望标签内容可滚动，高度为100％。

有一些关于如何在固定高度容器中执行此操作的示例，但我希望滚动窗口能够对窗口大小调整和解析进行反应。

基本问题：如果要滚动标签内容需要设置高度，如果查看浏览器分辨率低于设置的高度，内容将被切断。

我有一个例子：

是否有高度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

如果选项卡内容上方的内容是固定高度，则可以将CSS calc方法与视口高度（vh）单位一起使用。

.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);
}

工作小提琴：https://jsfiddle.net/6wt3hs15/1/ 请注意，calc函数中的像素值需要是选项卡内容上方所有内容的像素高度。

编辑：为了获得最大的兼容性，您可能还希望包含calc函数的前缀版本。编辑代码以反映这一点。

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

1 个答案: