我正在努力解决一个 div 与它的 sibling 重叠的情况，这破坏了可用性。
我希望实现 #container 的内容直接在 header 下开始，并且在点击 footer 时内容立即可滚动而不是重叠 footer。 (要重现只需添加一些任务)
对于 header，我尝试对 #container 应用一些 padding，它还可以，但在窗口调整大小时会中断。对于 footer 的底部，margin 或 padding 都不起作用。
我做错了什么？
document.addEventListener('DOMContentLoaded', function() {
window.input = document.getElementById('input');
window.container = document.getElementById('container');
window.input.addEventListener('keypress', function(event) {
if (event.keyCode == '13' && window.input.value != '') {
addTask();
}
});
/**for (let i = 0; i < localStorage.length; i++) {
addTask(i, 'auto');
}*/
});
const checkButton = () => {
if (window.input.value != '') {
addTask();
}
};
const addTask = (index, type) => {
let task = document.createElement('div');
if (!type) {
task.textContent = window.input.value;
//localStorage.setItem(window.input.value, window.input.value);
} else {
//task.textContent = localStorage.getItem(localStorage.key(index));
}
task.classList.add('task');
let closeButton = document.createElement('div');
closeButton.textContent = 'X';
closeButton.classList.add('close');
closeButton.setAttribute('onclick', 'removeTask(this)');
task.appendChild(closeButton);
window.container.appendChild(task);
window.input.value = '';
};
const removeTask = (task) => {
window.container.removeChild(task.parentNode);
//localStorage.removeItem(task.parentNode.textContent.substring(0, task.parentNode.textContent.length - 1));
};#input {
width: 80%;
color: #E6E6FA;
}
body {
background-color: #E9FEF2;
}
#container {
padding-top: 6%; /** My try with the padding */
width: 100%;
}
h5 {
margin: 1% 1%;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: #E6E6FA;
}
footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
text-align: center;
}
.task {
text-align: left;
padding: 1% 1% 1% 1%;
background-color: #acaaaa;
width: 100%;
}
.task:nth-child(odd) {
background-color: #ccc7c7;
}
.close {
text-align: center;
width: 2%;
color: #FF0000;
float: right;
margin-right: 1%;
}
.close:hover {
background-color: #FF0000;
color: #FFFFFF;
cursor: pointer;
}<!doctype html>
<html>
<head>
<title>What's up?</title>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<body>
<header>
<h5>Your tasks:</h5>
</header>
<div id="container"></div>
<footer>
<input type="text" placeholder="Enter task here..." id="input" autofocus>
<a class="waves waves-light btn" onclick="checkButton()">Add</a>
</footer>
</body>
</html>我还有一个codepen玩玩。
最佳答案
问题
问题是您在 header 和 footer 上使用 position:fixed; 但不知道它们的高度是多少占用，这意味着您无法使用 margin 或 padding 来可靠地“保留”空间。
解决方案
如果 header 和 footer 具有固定高度，您可以向 #container 添加顶部和底部 padding 来“清除”它们。
如果header和footer没有设置height，有一种方法可以确保它们在容器时保持在顶部和底部占用剩余空间的方法是使用flexbox代替。
document.addEventListener('DOMContentLoaded', function() {
window.input = document.getElementById('input');
window.container = document.getElementById('container');
window.input.addEventListener('keypress', function(event) {
if (event.keyCode == '13' && window.input.value != '') {
addTask();
}
});
/**for (let i = 0; i < localStorage.length; i++) {
addTask(i, 'auto');
}*/
});
const checkButton = () => {
if (window.input.value != '') {
addTask();
}
};
const addTask = (index, type) => {
let task = document.createElement('div');
if (!type) {
task.textContent = window.input.value;
//localStorage.setItem(window.input.value, window.input.value);
} else {
//task.textContent = localStorage.getItem(localStorage.key(index));
}
task.classList.add('task');
let closeButton = document.createElement('div');
closeButton.textContent = 'X';
closeButton.classList.add('close');
closeButton.setAttribute('onclick', 'removeTask(this)');
task.appendChild(closeButton);
window.container.appendChild(task);
window.input.value = '';
};
const removeTask = (task) => {
window.container.removeChild(task.parentNode);
//localStorage.removeItem(task.parentNode.textContent.substring(0, task.parentNode.textContent.length - 1));
};#input {
width: 80%;
color: #E6E6FA;
}
body {
background-color: #E9FEF2;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100vh;
}
#container {
/*padding-top: 6%;*/ /** My try with the padding */
width: 100%;
flex: 1 1 auto;
overflow-y: auto;
}
h5 {
margin: 1% 1%;
}
header {
/*position: fixed;
top: 0;*/
width: 100%;
background-color: #333;
color: #E6E6FA;
}
footer {
overflow: hidden;
background-color: #333;
/*position: fixed;
bottom: 0;*/
width: 100%;
padding: 10px;
text-align: center;
}
.task {
text-align: left;
padding: 1% 1% 1% 1%;
background-color: #acaaaa;
width: 100%;
}
.task:nth-child(odd) {
background-color: #ccc7c7;
}
.close {
text-align: center;
width: 2%;
color: #FF0000;
float: right;
margin-right: 1%;
}
.close:hover {
background-color: #FF0000;
color: #FFFFFF;
cursor: pointer;
}<!doctype html>
<html>
<head>
<title>What's up?</title>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<body>
<header>
<h5>Your tasks:</h5>
</header>
<div id="container"></div>
<footer>
<input type="text" placeholder="Enter task here..." id="input" autofocus>
<a class="waves waves-light btn" onclick="checkButton()">Add</a>
</footer>
</body>
</html>关于html - Div 低于其 sibling ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51723323/