Question

我正在关注MVC方法，您可以保留一些内容static。使用layout的页眉，页脚，侧边栏等。在我看来，我希望在用户scroll-down页面时修复页眉和侧边栏。有什么帮助吗？

Answer 1

使用position : fixed作为标题div和侧边栏div。

Answer 2

你绝对可以清理侧边栏和固定位置，但 this demo 似乎有效（仅限快速模型）。您需要将CSS添加到样式表，然后为标题，侧边栏和主要内容窗口创建部分内容。

在CSS（下方）中，您需要调整一些属性，以确保在设置设计时所有内容都正确对齐。

* { box-sizing: border-box; }

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding:10px;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}

.container { padding-top: 32px; } /* Adjust this value based on height of .header */

.main {
    width: 70%;
    margin-left: 30%;
    padding-left: 20px;
}

.sidebar {
    position: fixed;
    top: 41px; /* Adjust this value based on height of .header and any additional padding */
    bottom: 0;
    width: 30%;
    overflow-y: scroll;
}

如何固定标题和侧栏？

2 个答案: