代码之家  ›  专栏  ›  技术社区  ›  CodeF0x

Div在它的兄弟层下面

css html
  •  2
  • CodeF0x  · 技术社区  · 8 年前

    我正在与一个div做斗争,这个div在它的兄弟姐妹的基础上破坏了可用性。

    我想达到的内容 #container 直接从下面开始 header 当点击时内容可以立即滚动 footer 而不是下垫 页脚 . (要复制,只需添加一些任务)

    对于 标题 ,我想申请一些 padding 到 #集装箱 它有点用,但当窗户重新调整时就坏了。对于底部 页脚 ,也不是 margin 或 衬垫 工作。

    我做错什么了? 

    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 玩玩。

    3 回复  |  直到 8 年前
        1
  •  1
  •   Hidden Hobbes    8 年前

    问题

    问题是你正在使用 position: fixed; 上 header 和 footer 但是不知道他们会有多高,这意味着你不能使用 margin 或 padding 可靠地“保留”空间。

    解决方案

    如果 标题 和 页脚 有一个固定的高度你可以加上顶部和底部 衬垫 到 #container 去“清除”他们。

    如果 标题 和 页脚 没有一套 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>
        2
  •  1
  •   Carl Binalla    8 年前

    解决这个问题的一个方法是你需要得到两者的高度 <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>
        3
  •  1
  •   Jithin Raj P R    8 年前

    这对你有用:

    我刚加了一个 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>

    希望这对你有帮助。

    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    1 年前
    magenta placenta  ·  将css变量合并为一个变量
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    1 年前
    Luckkks  ·  过渡色工作不正常
    1 年前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号