问题

Question

我在一个div与其兄弟姐妹重叠的问题上苦苦挣扎，这破坏了可用性。

我希望实现#container的内容直接在header下开始，并且在击中footer而不是重叠footer时，内容可以立即滚动。（要重现，只需添加一些任务）

对于header，我尝试将一些padding应用于#container，虽然可以，但是在调整窗口大小时会中断。对于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可以玩。

Answer 1

一种解决方法是，在运行时（因为高度是动态的），您需要同时获取<header>和<footer>的高度，如果您想要尽可能地响应。

然后在获得高度后，将padding-top: height of header和padding-bottom:height of footer添加到正文中。哦，还要删除padding-top

中的#container

我为此使用了JQuery，您可以根据需要将其转换为JavaScript。

看起来仍然在重叠，但是您可以在到达页脚后立即滚动

/*
  You can convert this to javascript if you want
*/

$(function() {
  var headerHeight = $('header').outerHeight();
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-top', headerHeight);
  $('body').css('padding-bottom', footerHeight);
});



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 {
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<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>

Answer 2

问题

问题是您正在position: fixed;和header上使用footer，但不知道它们将占用多少高度，这意味着您不能使用{{ 1}}或margin以可靠地“保留”该空间。

解决方案

如果padding和header的高度固定，则可以在footer的顶部和底部添加padding以“清除”它们。

如果#container和header没有一组footer，则在容器占用剩余空间的同时确保它们停留在顶部和底部的一种方法是使用{ {1}}。

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));
};

Answer 3

这将为您工作：

考虑到您的页眉和页脚，我刚刚在px和top中添加了固定bottom填充。

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: 49px 0 71px;
  /** 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>

希望这对您有所帮助。

迪夫的兄弟姐妹

3 个答案:

问题

解决方案