Question

我从html模板构建了网站。我一直在尝试从固定位置移除页脚，并使我的索引页面上的页眉和页脚之间的图像显示为全高。目前图像隐藏在页眉和页脚之后。我的网站链接http://vizoviphotography.com。有什么建议可以解决这个问题吗？

Answer 1

您遇到的问题是您使用了

.epic-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

和

.epicSlider.slider-wrapper {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;        /* this really is a problem */
    top: 2px;
    left: 1px;
}

这些总是会使滑块填充身体的100％

首先你可以从.epic-wrapper样式中删除高度：100％并使其相对并删除#wrapper顶部的填充。

.epic-wrapper {
    position: relative;
    width: 100%;
}

.no-touch #wrapper {
    /* padding-top: 130px; */
}

然后我建议你写一些JQuery挂钩到“resize”并动态计算'.slider-wrapper'的高度。您将需要获取（身高 - （标题高度+页脚高度）），然后将该计算值应用于.epicSlider.slidewrapper（或#epicSlider，如果需要）的高度。请记住考虑边距和边界。

获得类似

的内容

.epicSlider.slider-wrapper {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 670px;
    top: 2px;
    left: 1px;
}

您需要处理调整大小，以便当用户拖动窗口时，相应地调整高度。

删除固定页脚并获取标题下方的图像

1 个答案: