显示div直到到达页面底部时出错
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了显示div直到到达页面底部时出错相关的知识，希望对你有一定的参考价值。
我在另一个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>
我的代码示例在这里：https://codepen.io/the-writer/pen/NXNLob，我没有添加knockout js标签，因为我只使用了这个库的observable。
答案
由于.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>另一答案
水平滚动条出现是因为position: absolute上的.tab-loading-mask和margin: 8px上固有的<body>的组合。设置position: absolute会将元素从流中取出，所以当你在width: 100%上设置.tab-loading-mask时，它会占用宽度的100%而不管游戏中的边距。
要解决此问题，您有两种选择：
1）将身体上的默认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;
}<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>另一答案
看起来你实际上是在询问如何在一个列中的视口中填充2个元素，一个具有固定的高度，另一个将填充剩余的高度，
您可以使用display: flex;设置为列在视口的高度内垂直显示2个div
删除边距，并将所有内容设置为边框以获得更均匀的样式，或者更好，使用像normalize.css这样的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>以上是关于显示div直到到达页面底部时出错的主要内容，如果未能解决你的问题，请参考以下文章