【CSS overflow】想要浏览器窗口无滚动条，div内容在任何窗口下都可以滚动到底

Question

想要body 没有滚动条

但是div内容 可以尽情滚动到底部

中间部分结构代码
`

 <el-col :span="16">
        <div class="passage-btn">
          <el-image style="width: 60px; height: 65px" :src="btn" class="img"></el-image>
        </div>
        <div class="passage-container">
          <div class="passage">
            <div v-for="(item,index) in sentence" :key="index" class="gragh">
              <span v-for="(i,index) in item.sentenceWords" :key="index">
                <span
                  v-for="(k,index) in i.content"
                  :key="index"
                  :class="{active: checkindex==index && sentenceId == i.id}"
                  @contextmenu="showMenu(i)"
                  @click="getSelectText(i,index)"
                >
                  {{k}}
                  <vue-context-menu
                    :contextMenuData="contextMenuData"
                    @modify="modify"
                    @insert="insert"
                    @del="del"
                  ></vue-context-menu>
                </span>
              </span>
            </div>
          </div>
        </div>
      </el-col>

右侧

`

 <el-col :span="4">
        <div class="right-passage">
          <div class="explain">
            <div class="explain-title">{{activeName==='word'?"单词释义":"句子翻译"}}</div>
            <!-- 单词模块 -->
            <div class="content" v-if="activeName==='word'">
              <div class="proto">
                <span class="proto-word">原型词</span>
                <span class="proto-explain">{{wordList?wordList.prototypeWord :"无"}}</span>
              </div>
              <div class="word">{{wordList?wordList.partOfSpeech +" "+wordList.paraphrase:"未维护"}}</div>
              <div class="mean" v-for="(item,index) in wordInfo" :key="index">
                <p>{{item.partOfSpeech}} {{item.paraphrase}}【{{item.count}}】</p>
              </div>
            </div>
            <!-- 翻译模块 -->
            <div class="content" v-else>
              <div>{{this.sentenceTranslate.translate || "未维护"}}</div>
            </div>
          </div>
          <div class="tabs">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="单词" name="word">
                <word
                  :wordData="wordData"
                  :disable="disable"
                  :wordList="wordList"
                  :sentenceInfo="sentenceInfo"
                ></word>
              </el-tab-pane>
              <el-tab-pane label="句子" name="sentence">
                <div class="sentence-title">本句中文翻译</div>
                <div>
                  <el-input
                    :disabled="disable"
                    type="textarea"
                    v-model="translate"
                    :rows="7"
                    :autosize="{ minRows: 20, maxRows: 30}"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
                <div class="btn">
                  <el-button type="primary" @click="saveSentence">{{disable?'修改':'保存'}}</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
    </el-row>

`

样式

`

.passage-container {
  background-color: #fafafa;
  padding: 30px 17px;
}
.right-passage{
  overflow: scroll;
  overflow-x: hidden;
}
.passage-btn {
  box-shadow: inset 0px -1px 0px 0px rgb(0, 0, 0);
}
.passage {
  background-color: white;
  padding: 50px 20px;
  overflow: auto;
  max-height: 1100px;
}
.gragh {
  margin: 10px 0;
  padding: 5px;
}
.gragh span {
  cursor: pointer;
}
.el-tabs__content {
  overflow: inherit !important;
}
.el-form--inline .el-form-item__label {
  font-size: 0.2rem;
}
.explain-title {
  height: 30px;
  background-color: #409eff;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}
.active {
  color: red;
  background-color: yellow;
}
.content {
  min-height: 270px;
  background-color: rgba(242, 242, 242, 1);
  text-align: left;
  padding: 0 5px;
  .proto {
    border-bottom: 1px solid #d4d4d4;
    margin: 0 10px;
    span {
      display: inline-block;
      margin: 10px;
    }
    .proto-word {
      background-color: #409eff;
      color: #fff;
      padding: 5px;
    }
  }
  .word {
    padding: 10px 5px;
    margin: 10px;
    border-bottom: 1px solid #d4d4d4;
  }

  .mean {
    margin: 0 10px;
    padding: 5px;
  }
}
.tabs {
  margin: 10px;
  .sentence-title {
    font-size: 12px;
    color: #778899;
    margin: 5px 0;
  }
}
.btn {
  text-align: center;
  margin: 20px 0;
}

`

Answer 1

chrome下

body::-webkit-scrollbar {
    width: 0;
}