Question

首先，这不完全是页脚。我不想使用position: fixed。我有2个不同的用例。如下图所示，其中Saved Quizzes区域应停留在页面底部。 picture

它是<body>的直接子代。

我的另一个用例是这里，灰色区域应延伸到屏幕底部。 picture

这是一堆其他元素的子元素。有一个简单的方法可以做到这一点吗？

一切都是使用Kotlin-JS程序生成的HTML。第一个问题的代码如下：

    val body = content.appendChild(document.createElement("div")) as HTMLDivElement
    body.className = "pad quizlist"
    body.id = "editor_qlist"
    val name = body.appendChild(document.createElement("h1")) as HTMLHeadingElement
    name.style.textAlign = "center"
    name.textContent = "Saved Quizzes"
    [...list all the questions...]
    [...Make the raw JSON input(not pictured)...]
    val add = body.appendChild(document.createElement("div")) as HTMLDivElement
    add.className = "add"
    add.onclick = {
        makeCreation(emptyList())
    }
    val h = add.appendChild(document.createElement("h1")) as HTMLHeadingElement
    h.textContent = "+"
    //TODO val spacer = body.appendChild(makeSpacer(body, true))
}

此代码（列表中没有任何内容，并且已删除JSON输入）出现在此html中：

<div class="pad quizlist" id="editor_qlist">
    <h1 style="text-align: center;">Saved Quizzes</h1>
    <div class="add">
        <h1>+</h1>
    </div>
</div>

与CSS实际相关的部分：

#editor_qlist {
    background-color: #E0E0E0;
    padding: 2.5%;
}
div.quizlist {
    margin-top: 10%;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
div.pad {
    background-color: white;
    border-radius: 4mm;
    position: relative;
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0%);
    padding: 1%;
    min-height: 100%;
}

如何制作一个div元素来填充所有剩余空间并扩展到页面底部？

0 个答案: