位置：固定，无法按预期工作

时间：2019-01-23 14:38:33

标签： javascript html css css-position

我一直在开发一个小型笔记本Web应用程序，我的问题是我想要页眉（代码中ID为header的div）和页脚（ID为的元素，即使{{ 1}}上的代码）甚至在我向下或向上滚动时也会出现（滚动条仅在您添加长音符时出现，因此请尝试理解我的意思）。

我试图将positon设置为fixed，但是这给我带来了不好的结果，所以无论如何要这样做？

footer
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete"); 
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
let mynotes = {};
let i = 1;

add.addEventListener('click', function(){
    main.style.display = "block";
    submit.style.display = "inline";
    cancel.style.display = "inline";
    add.style.display = "none";
    screen.style.display = "none";
    del.style.display = "none";
    back.style.display = "none";
    inputTitle.style.display = "block"
});

submit.addEventListener('click', function(){
    title = noteTitle.value;
    if (mynotes.hasOwnProperty(title)) {
        title = title + `${++i}`;
    }
    newNote = note.value;
    newNote = newNote.replace(/\n/g, "<br>");
    mynotes[title] = newNote;

    var li = document.createElement("li");
    li.setAttribute('class','item');
    li.appendChild(document.createTextNode(title));
    ul.appendChild(li);
    note.value = "";
    noteTitle.value = "";

    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    cancel.style.display = "none";
    add.style.display = "inline";
    del.style.display = "none";
    back.style.display = "none";
    inputTitle.style.display = "none";
});

ul.addEventListener('click', function(event){
    node = event.target;
    item = event.target.textContent;
    text.innerHTML = mynotes[item];
    fullnote.style.display = "block";
    main.style.display = "none";
    submit.style.display = "none";
    add.style.display = "none";
    screen.style.display = "none";
    cancel.style.display = "none";
    del.style.display = "inline";
    back.style.display = "inline";
    inputTitle.style.display = "none";
});

del.addEventListener('click', function(){
    ul.removeChild(node);
    delete mynotes[item];
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    back.style.display = "none";
    del.style.display = "none";
    inputTitle.style.display = "none";
});

cancel.addEventListener('click', function(){
    note.value = "";
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    del.style.display = "none";
    back.style.display = "none";
    cancel.style.display = "none";
    inputTitle.style.display = "none";
});

back.addEventListener('click', function(){
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    back.style.display = "none";
    del.style.display = "none";
    inputTitle.style.display = "none";
});
#container {
    background-color: rgb(253, 248, 177);
}

#header, #footer {
    z-index: 2;
}

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit, #back {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

#input-title {
    display: none;
}

#main {
    display: none;
}


#note {
    resize: none;
}


#fullnote {
    display: none;
}

#back {
    display: none;
}

这里是尝试该应用程序的链接： notebook

1 个答案:

答案 0 :(得分：0)

在position: fixed;和.container中添加了#header和类#footer以继承宽度样式。还为补偿头高度添加了margin-top和#screen的{​​{1}}。 

#input-title
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete"); 
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
let mynotes = {};
let i = 1;

add.addEventListener('click', function(){
    main.style.display = "block";
    submit.style.display = "inline";
    cancel.style.display = "inline";
    add.style.display = "none";
    screen.style.display = "none";
    del.style.display = "none";
    back.style.display = "none";
    inputTitle.style.display = "block"
});

submit.addEventListener('click', function(){
    title = noteTitle.value;
    if (mynotes.hasOwnProperty(title)) {
        title = title + `${++i}`;
    }
    newNote = note.value;
    newNote = newNote.replace(/\n/g, "<br>");
    mynotes[title] = newNote;

    var li = document.createElement("li");
    li.setAttribute('class','item');
    li.appendChild(document.createTextNode(title));
    ul.appendChild(li);
    note.value = "";
    noteTitle.value = "";

    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    cancel.style.display = "none";
    add.style.display = "inline";
    del.style.display = "none";
    back.style.display = "none";
    inputTitle.style.display = "none";
});

ul.addEventListener('click', function(event){
    node = event.target;
    item = event.target.textContent;
    text.innerHTML = mynotes[item];
    fullnote.style.display = "block";
    main.style.display = "none";
    submit.style.display = "none";
    add.style.display = "none";
    screen.style.display = "none";
    cancel.style.display = "none";
    del.style.display = "inline";
    back.style.display = "inline";
    inputTitle.style.display = "none";
});

del.addEventListener('click', function(){
    ul.removeChild(node);
    delete mynotes[item];
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    back.style.display = "none";
    del.style.display = "none";
    inputTitle.style.display = "none";
});

cancel.addEventListener('click', function(){
    note.value = "";
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    del.style.display = "none";
    back.style.display = "none";
    cancel.style.display = "none";
    inputTitle.style.display = "none";
});

back.addEventListener('click', function(){
    main.style.display = "none";
    screen.style.display = "block";
    submit.style.display = "none";
    add.style.display = "inline";
    fullnote.style.display = "none";
    back.style.display = "none";
    del.style.display = "none";
    inputTitle.style.display = "none";
});
#container {
    background-color: rgb(253, 248, 177);
}

#header, #footer {
    z-index: 2;
    width: 100%;
    position: fixed;
}

#footer {
  bottom: 0;
}

#screen, #input-title {
  margin-top: 2em;
} 

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit, #back {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

#input-title {
    display: none;
}

#main {
    display: none;
}


#note {
    resize: none;
}


#fullnote {
    display: none;
}

#back {
    display: none;
}

相关问题
最新问题