footer

footer

关注
发信
关注(28)粉丝(399)

html - 迪夫的 sibling

我正在与一个div做斗争，这个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可以玩。

最佳答案

问题
问题是，您在position: fixed;和header上使用footer，但不知道它们将占用多少高度，这意味着您无法使用margin或padding来可靠地“保留”空间。
解决方案
如果header和footer有一个固定的高度，您可以添加顶部和底部padding到#container以“清除”它们。
如果header和footer没有一个集合，那么在容器占用剩余空间时，确保它们保持在顶部和底部的一种方法是使用height。

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 - 迪夫的 sibling ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51723323/

10-13 00:17
Powered by LMLPHP ©2024 footer 0.024211