我在另一个div前面显示一个div，显示一个带有observable的加载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>
我的代码示例在这里：https://codepen.io/the-writer/pen/NXNLob，我没有添加knockout js标签，因为我只使用了这个库的observable。
答案 0 :(得分：1)
由于.tab-loading-mask为position: absolute;，其父级需要position: relative;
position: absolute;个元素相对于最近的父级
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.tabLoading = ko.observable(false);
this.startLoading = () => {
this.tabLoading(true);
console.log("Start");
}
this.stopLoading = () => {
this.tabLoading(false);
console.log("Stoped");
}
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());.nav-bar {
height: 200px;
background-color: green;
}
.content {
position: relative;
}
.tab-loading-mask {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.25);
overflow: hidden;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<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>
答案 1 :(得分：0)
出现水平滚动条是因为.tab-loading-mask上的 position: absolute 与{{1}上固有的 margin: 8px 的组合}。设置<body>会将元素排除在流量之外，因此当您在position: absolute上设置width: 100%时，它会占用的.tab-loading-mask，无论是多少正在发挥作用的边缘。
要解决此问题，您有两种选择：
1）将正文上的默认100%覆盖回margin。这将使页面上的所有元素在页面边缘向上冲洗，这可能不是故意的（例如，您的0是偏移的）：
.nav-bar
body {
margin: 0;
}
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.tabLoading = ko.observable(false);
this.startLoading = () => {
this.tabLoading(true);
//console.log("Start");
}
this.stopLoading = () => {
this.tabLoading(false);
//console.log("Stoped");
}
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());body {
margin: 0;
}
.nav-bar {
height: 200px;
background-color: green;
}
.tab-loading-mask {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.25);
overflow: hidden;
}
2）利用 calc() 在<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>上设置width 100% - (8px * 2)。这适用于元素两侧的.tab-loading-mask边距，使其与8px的偏移齐平。
.nav-bar
.tab-loading-mask {
width: calc(100% - (8px * 2));
}
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.tabLoading = ko.observable(false);
this.startLoading = () => {
this.tabLoading(true);
//console.log("Start");
}
this.stopLoading = () => {
this.tabLoading(false);
//console.log("Stoped");
}
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());.nav-bar {
height: 200px;
background-color: green;
}
.tab-loading-mask {
position: absolute;
width: calc(100% - (8px * 2));
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.25);
overflow: hidden;
}
请注意两个片段周围的空白区别。
希望这有帮助！ ：）
答案 2 :(得分：0)
看起来你实际上是在询问如何在一列中的视口中填充2个元素，一个具有固定的高度，另一个将填充剩余的高度，
您可以使用display: flex;设置为列在视口高度内垂直显示2个div
删除边距，并将所有内容设置为边框以获得更统一的样式，或者更好，使用css重置，如normalize.css
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.nav-bar {
height: 200px;
background-color: green;
}
.content {
background: blue;
height: 100%;
}<div class="container">
<div class="nav-bar">NAV BAR</div>
<div class="content">
<div class="tab-content">CONTENT</div>
</div>
</div>