垂直滚动条破坏了设计

Question

我为我的网站创建了一个响应式设计，其中包含两个固定容器 - 页眉和页脚。昨天我发现当我将网站转换为应用程序（使用webview）时，固定容器会在某些手机中出现问题。

所以，我找到了另一个使用display的解决方案：table，display：table-row和display：table-cell。

一切正常：

但如果我粘贴一个长文本，则会出现垂直滚动条并取消设置设计。

蓝色和黄色容器必须保持不同的位置（我无法设置固定宽度，因为设计必须响应）。如果需要，我不想隐藏滚动条。

如何解决此问题？

HTML

<div class="mn_tab">
  <div class="mn_row_head">
    <div class="mn_cell_inner">    
      <div class="mn_head_in">    
        Header
      </div>
    </div>
  </div>
  <div class="mn_content">
    <div class="mn_cell_inner">
      <div class="mn_txt">    
        <div class="mn_hre">            
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>             
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>             
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mn_row_foot">
    <div class="mn_cell_inner">Footer</div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

.mn_tab {
  height: 100%;
  width: 100%;
  display: table;
}

.mn_row_head,
.mn_content,
.mn_row_foot {
  display: table-row;
}

.mn_row_head,
.mn_row_foot {
  background: silver;
}

.mn_cell_inner {
  display: table-cell;
  text-align: center;
}

.mn_content .mn_cell_inner {
  height: 100%;
  position: relative;
  background: pink;
}

.mn_txt {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.mn_head_in {
  background: blue;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
}

.mn_hre {
background: yellow;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
}

Answer 1

使用下一个代码删除滚动条

Higher than: 7

希望这会有所帮助：＆gt;

::-webkit-scrollbar {
    display: none;
}

    html,
body {
  height: 100%;
  margin: 0;
}

.mn_tab {
  height: 100%;
  width: 100%;
  display: table;
}

.mn_row_head,
.mn_content,
.mn_row_foot {
  display: table-row;
}

.mn_row_head,
.mn_row_foot {
  background: silver;
}

.mn_cell_inner {
  display: table-cell;
  text-align: center;
}

.mn_content .mn_cell_inner {
  height: 100%;
  position: relative;
  background: pink;
}
.mn_txt {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.mn_head_in {
  background: blue;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
}

.mn_hre {
background: yellow;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
  }
  
  
  ::-webkit-scrollbar {
    display: none;
}

要限制“删除”滚动条的代码，您可以添加媒体查询：

<div class="mn_tab">
  <div class="mn_row_head">
    <div class="mn_cell_inner">

      <div class="mn_head_in">

        Header

      </div>

    </div>
  </div>
  <div class="mn_content">
    <div class="mn_cell_inner">
      <div class="mn_txt">

        <div class="mn_hre">



<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>

         <p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>

         <p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>

         <p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>

         <p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>



        </div>
      </div>
    </div>
  </div>
  <div class="mn_row_foot">
    <div class="mn_cell_inner">Footer</div>
  </div>
</div>