Javascript 显示div直到到达页面底部时出错_Javascript_Html_Css_Knockout.js

Javascript 显示div直到到达页面底部时出错

javascript html css knockout.js

Javascript 显示div直到到达页面底部时出错,javascript,html,css,knockout.js,Javascript,Html,Css,Knockout.js,我在另一个div前面显示一个div，以显示一个可观察的加载div；问题是，当显示加载div时，它会增长，并出现一个难看的滚动条，是否可能只显示加载div，直到它到达页面底部 <html> <head> <title>Hello loading div</title> </head> <body> <div class="container"> <div class=

我在另一个div前面显示一个div，以显示一个可观察的加载div；问题是，当显示加载div时，它会增长，并出现一个难看的滚动条，是否可能只显示加载div，直到它到达页面底部

<html> 
  <head>
    <title>Hello loading div</title>
  </head>
  <body>
    <div class="container">
      <div class="nav-bar">
        <button data-bind= "click: startLoading">Start loading</button>
        <button data-bind= "click: stopLoading">Stop loading</button>
      </div>
      <div class="content">
        <div class="tab-content">
          <!-- ko if: tabLoading -->
          <div class="tab-loading-mask" id="tab-loading-mask-edit"></div>
          <!-- /ko -->
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
    </div>  
  </body>  
</html>

我的代码示例如下：，我没有添加knockout js标记，因为我只使用这个库的observable；其父需要位置：相对

位置：绝对位置；图元相对于其最近的父图元进行定位

//这是一个简单的*viewmodel*-JavaScript，用于定义用户界面的数据和行为函数AppViewModel{ this.tabLoading=ko.observefalse；这是令人吃惊的==>{ 这是一个很好的例子； console.logStart； } this.stopLoading==>{ 这是错误的； console.logStoped； } } //激活knockout.js ko.applyBindingsnew-AppViewModel； .导航栏{ 高度：200px；背景颜色：绿色； } .内容{ 位置：相对位置； } .tab加载掩码{ 位置：绝对位置；宽度：100%；身高：100%； z指数：100；背景：rgba0,0,0,0.25；溢出：隐藏； } 你好，装货部开始加载停止加载 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

出现水平滚动条是因为on.tab加载掩码和固有的on。设置位置：绝对将元素从流中移除，因此，当您设置宽度：100%打开。制表符加载掩码时，它将占据100%的宽度，而不考虑正在使用的边距

要解决此问题，您有两种选择：

1将正文上的默认边距重写回0。这将使页面上的所有元素与页面边缘齐平，这可能不是有意的。导航栏偏移，例如：

body {
  margin: 0;
}

//这是一个简单的*viewmodel*-JavaScript，用于定义用户界面的数据和行为函数AppViewModel{ this.tabLoading=ko.observefalse；这是令人吃惊的==>{ 这是一个很好的例子； //console.logStart； } this.stopLoading==>{ 这是错误的； //console.logStoped； } } //激活knockout.js ko.applyBindingsnew-AppViewModel；身体{ 保证金：0； } .导航栏{ 高度：200px；背景颜色：绿色； } .tab加载掩码{ 位置：绝对位置；宽度：100%；身高：100%； z指数：100；背景：rgba0,0,0,0.25；溢出：隐藏； } 开始加载停止加载 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

看起来您实际上是在问如何在一列中填充视口中的两个元素，一个具有固定高度，另一个将填充剩余高度

您可以使用display:flex；设置为“列”可在视口高度内垂直显示2个div

删除边距，并将所有内容设置为边框框，以获得更统一的样式，或者更好地使用css重置，如

* { 框大小：边框框； } html，身体{ 保证金：0；身高：100%； } .集装箱{ 身高：100%；显示器：flex；弯曲方向：立柱； } .导航栏{ 高度：200px；背景颜色：绿色； } .内容{ 背景：蓝色；身高：100%； } 导航条所容纳之物

你是说简单地从灰色覆盖中删除水平滚动条，还是想改变垂直滚动条的行为？我想我还不够清楚，但我指的是垂直滚动条。感谢您的快速回答，我加载了您的代码，但我仍然看到一个问题，选项卡加载掩码没有增长到页面底部。R

现在它只适合该分区。谢谢，但这不是我要找的我想要的标签加载掩码增长到屏幕底部。。。