Question

我试图创建一个具有可滚动内容区域的布局，防止用户不得不滚动页面，在这个布局中我有一个固定的页脚，这似乎有问题，因为我的可滚动内容被隐藏在后面这个。谁能建议如何解决这个问题？看起来可滚动卡实际上使用的是全视口高度而不是可用高度。

将display:flex; flex-direction: column添加到.canvas-container会在Chrome中解决此问题，但不会在Safari中解决此问题，因此需要寻找更一致的内容。

Answer 1

将底部填充添加到div（页脚高度）。

.canvas-container {
  padding-bottom: 42px;
}

Answer 2

你能否在画布容器中添加padding-bottom：40px？

.canvas-container {
    padding-bottom: 40px;
}

Answer 3

不要在卷轴内容上使用100％的高度，而是需要100％减去页脚的42px，所以为此你可以使用calc：

.scroller__content {
    height: calc(100% - 42px);
}

我认为这是您需要更改的代码的一部分：

.scroller {
    height: 100%;
    width: 100%;

    &__content {
        -webkit-user-select: none;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        transform: translateZ(0);
        height: calc(100% - 42px);
    }
}

如果您不想使用实验性技术（尽管calc得到了很好的支持），那么您可以在.scroller类中使用以下几行：

.scroller {
    height: 100%;
    width: 100%;

    /* add the following 2 lines */
    padding-bottom: 42px;
    box-sizing: border-box;

    &__content {
        -webkit-user-select: none;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        transform: translateZ(0);
        height: calc(100% - 42px);
    }
}

<强>更新

我设法得到原始笔的代码并更改了样式如下（主要是删除了很多高度100％并用flex-grow替换它们）：

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

.app {
    height: 100%;
    max-height: 100%;

    display: flex;
    flex-direction: column;
}

.main-header {
    height: 52px;
    background: darken(#fff, 10);
}

.banner {
    height: 30px;
    background: darken(#fff, 20);
}

.canvas-container,
.canvas,
.region-cards,
.cards {
  display: flex;
  width:100%;
  flex-grow: 1;
}
.card {
    width:100%;
    display:flex;
    flex-grow: 1;
    flex-direction: column;
    overflow: hidden;
    position: relative;

    &__header {
        height: 40px;
        width:100%;
        background: darken(#fff, 50);
    }

    &__body {
        flex-grow: 1;
        position: relative;
    }

    &__content {
        position:absolute;
        top:0; 
        bottom:42px;
        left:0; 
        right:0; 
        overflow:auto;
        &--offset {

        }
    }
}

.main-footer {
    height: 42px;
    background: darken(#fff, 20);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

Updated Pen

Answer 4

所有人都以像素为单位给出答案，但在响应式设计中，这可能会导致问题。你有一个卷轴类，其高度100％宽度100％，将其更改为以下：

.scroller {
    height: 96%;
    width: 100%;
}

固定页脚隐藏滚动内容DIV中的内容

4 个答案: