我正在制作待办事项列表作为Chrome新标签扩展程序.
我的html文件:
<head>
</head>
<body>
<h2 id="toc-final">To Do List</h2>
<ul id="todoItems"></ul>
<input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;">
<button id="newitem" value="Add Todo Item">Add</button>
<script type="text/javascript" src="indexdb.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
以前,button元素是带有onClick()的输入类型,但Chrome不允许这样做.所以我必须制作一个javascript函数,当它被阻塞时会触发.在我的indexdb.js中:
var woosToDo = {};
window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB;
woosToDo.indexedDB = {};
woosToDo.indexedDB.db = null;
window.addEventListener("DOMContentLoaded", init, false);
window.addEventListener('DOMContentLoaded', function () {
document.getElementById("newitem").addEventListener("click", addTodo(), false);
});
...
...
function addTodo() {
var todo = document.getElementById("todo");
woosToDo.indexedDB.addTodo(todo.value);
todo.value = "";
}
Run Code Online (Sandbox Code Playgroud)
当我点击按钮w/id ="newitem"时为什么没有发生?
我在一个视口上有 2 个 Div,每个视口的高度为 50vh,因此整个视口都被填满了。
我能够通过将按钮包含在上部 div 下来完成中间的按钮,然后将按钮的 margin-top 设置为负值,以便它位于较低的位置。
但是,对于内容较长以允许滚动的情况,我需要使用 min-height: 50vh (而不是 height: 50vh)。由于 min-height,上部 div 最终变得更高以包含整个按钮。
我怎样才能做到这一点?我尝试在上下 div 之间创建一个 div(而不是在上面的 div 下),但我似乎无法让它工作。我在下面附上了一张我想要完成的图片。实现这一目标的理想方法是什么?