使一个部分全屏显示

时间:2014-12-11 13:28:03

标签: javascript html css

在我的html代码中,我有以下内容:

<section id="cta">
        .......

            </section>



        <!-- Footer -->
            <footer id="footer">
                ......

            </footer>

当页面加载时,我如何让我的部分占据整个屏幕,而页脚实际上下降到滚动条。请注意,这必须是动态的,因为不同的计算机具有不同的屏幕尺寸,我知道高度100%的技巧,但在我的情况下有多个元素,并且可以使特定的一个占据整个屏幕而另一个一个可以通过滚动访问?

谢谢!

我实际上尝试删除一个js脚本,它工作,所以我怀疑它在js脚本中定义了一些css,但我似乎无法找到哪个是冲突的CSS,我试图添加!重要的我当前的CSS,但它不会覆盖js脚本中的那个。

这是JS脚本:

/* skel-layers.js v1.0.4 | (c) n33 | getskel.com | MIT licensed */
(function(e) {
    typeof define == "function" && define.amd ? define(["jquery", "skel"], e) : e(jQuery, skel)
})(function(e, t) {
   ...
          ...
        }
        var t;
        return typeof e == gt ? H : (e.fn[p] = function() {
            var t, n;
            if (this[z] > 1) {
                for (t = 0; t < this[z]; t++) e(this[t])[p]();
                return e(this)
            }
            return n = e(this), n[S](it, n.data(A)).data(A, ""), n
        }, e.fn[Ct] = function() {
            var t = e(this),
                n = t.parent(),
                r = 12;
            n[M]().each(function() {
                var t = e(this),
                    n = t[Lt]("class");
                n && n.match(/(\s+|^)([0-9]+)u(\s+|$)/) && (r -= parseInt(RegExp.$2))
            }), r > 0 && (t[ct](), t[S](E, (t.data(Jt) + r) / 12 * 100 + "%"))
        }, e.fn[Ot] = function() {
            return e(this).parents()[z] > 0
        }, e.fn[ct] = function() {
            var t = e(this);
            t[Lt]("class").match(/(\s+|^)([0-9]+)u(\s+|$)/) && t.data(Jt, parseInt(RegExp.$2))
        }, e.fn[c] = function(r) {
            var i, s, o;
            if (this[z] > 1) {
                for (i = 0; i < this[z]; i++) e(this[i])[c](r);
                return e(this)
            }
            return s = e(this), isNaN(o = parseInt(s.data(ot))) && (o = 0), s.data(A, s[S](it))[S](it, t[n].baseZIndex + o + (r ? r : 1)), s
        }, e.fn[u] = function() {
            var t = e(this);
            return e(this)[At]("form").each(function() {
                this.reset()
            }), t
        }, e.fn[qt] = function(t, n) {
            return e(this)[S](t, n)[S](Tt + t, Tt + n)[S](K + t, K + n)[S](Rt + t, Rt + n)[S](Dt + t, Dt + n)
        }, e.fn._skel_layers_xcssProperty = function(t, n) {
            return e(this)[S](t, n)[S](Tt + t, n)[S](K + t, n)[S](Rt + t, n)[S](Dt + t, n)
        }, e.fn._skel_layers_xcssValue = function(t, n) {
            return e(this)[S](t, n)[S](t, Tt + n)[S](t, K + n)[S](t, Rt + n)[S](t, Dt + n)
        }, Nn[C][lt] = {
            none: {
                show: function(e) {
                    var t = e[n],
                        r = e[h];
                    r[B](0)[c](t.zIndex)[nn](), t[$] && r[u](), e[d]()
                },
                hide: function(e) {
                    var t = e[n],
                        r = e[h];
                    r[It]()[p](), e[m]()
                }
            },
            overlayX: {
                show: function(e) {
                    var r = e[n],
                        i = e[h];
                    i[B](0)[c](r.zIndex)[S](r[en], Gt + t[Q](t._[w](r[E])) + Qt)[nn](), r[$] && i[u](), t[Ht](sn), e[d](), window[v](function() {
                        i[s]((r[en] == g ? Gt : "") + t[Q](t._[w](r[E])), 0)
                    }, 50)
                },
                hide: function(e) {
                    var i = e[n],
                        s = e[h];
                    s[At](an)[Xt](Nt, [J]), s[r](), window[v](function() {
                        t[ft](sn), e[m](), s[p]()[It]()
                    }, t[n][dt] + 50)
                }
            },
            overlayY: {
                show: function(e) {
                    var r = e[n],
                        i = e[h];
                    i[B](0)[c](r.zIndex)[S](r[en], Gt + t[Q](t._[w](r[U])) + Qt)[nn](), r[$] && i[u](), t[Ht]("y"), e[d](), window[v](function() {
                        i[s](0, (r[en] == y ? Gt : "") + t[Q](t._[w](r[U])))
                    }, 50)
                },
                hide: function(e) {
                    var i = e[n],
                        s = e[h];
                    s[At](an)[Xt](Nt, [J]), s[r](), window[v](function() {
                        t[ft]("y"), e[m](), s[p]()[It]()
                    }, t[n][dt] + 50)
                }
            },
            pushX: {
                show: function(e) {
                    var r = e[n],
                        a = e[h],
                        f = t[i][L].add(t[i][o][M]());
                    a[B](0)[S](r[en], Gt + t[Q](t._[w](r[E])) + Qt)[nn](), r[$] && a[u](), f[c](), t[Ht](sn), e[d](), window[v](function() {
                        a.add(f)[s]((r[en] == g ? Gt : "") + t[Q](t._[w](r[E])), 0)
                    }, 50)
                },
                hide: function(e) {
                    var s = e[n],
                        u = e[h],
                        a = t[i][L].add(t[i][o][M]());
                    u[At](an)[Xt](Nt, [J]), u.add(a)[r](), window[v](function() {
                        t[ft](sn), u[It](), e[m](), a[p]()
                    }, t[n][dt] + 50)
                }
            },
            pushY: {
                show: function(e) {
                    var r = e[n],
                        a = e[h],
                        f = t[i][L].add(t[i][o][M]());
                    a[B](0)[S](r[en], Gt + t[Zt](t._[w](r[U])) + Qt)[nn](), r[$] && a[u](), t[Ht]("y"), e[d](), window[v](function() {
                        a.add(f)[s](0, (r[en] == y ? Gt : "") + t[Zt](t._[w](r[U])))
                    }, 50)
                },
                hide: function(e) {
                    var s = e[n],
                        u = e[h],
                        a = t[i][L].add(t[i][o][M]());
                    u[At](an)[Xt](Nt, [J]), u.add(a)[r](), window[v](function() {
                        t[ft]("y"), u[It](), e[m]()
                    }, t[n][dt] + 50)
                }
            },
            revealX: {
                show: function(e) {
                    var r = e[n],
                        a = e[h],
                        f = t[i][L].add(t[i][o][M]());
                    a[B](0)[nn](), r[$] && a[u](), f[c](), t[Ht](sn), e[d](), window[v](function() {
                        f[s]((r[en] == g ? Gt : "") + t[Q](t._[w](r[E])), 0)
                    }, 50)
                },
                hide: function(e) {
                    var s = e[n],
                        u = e[h],
                        a = t[i][L].add(t[i][o][M]());
                    u[At](an)[Xt](Nt, [J]), a[r](), window[v](function() {
                        t[ft](sn), u[It](), a[p](), e[m]()
                    }, t[n][dt] + 50)
                }
            }
        }, Nn[C][bt] = {
            "top-left": {
                v: R,
                h: k,
                side: k
            },
            "top-right": {
                v: R,
                h: g,
                side: g
            },
            top: {
                v: R,
                h: T,
                side: R
            },
            "top-center": {
                v: R,
                h: T,
                side: R
            },
            "bottom-left": {
                v: y,
                h: k,
                side: k
            },
            "bottom-right": {
                v: y,
                h: g,
                side: g
            },
            bottom: {
                v: y,
                h: T,
                side: y
            },
            "bottom-center": {
                v: y,
                h: T,
                side: y
            },
            left: {
                v: T,
                h: k,
                side: k
            },
            "center-left": {
                v: T,
                h: k,
                side: k
            },
            right: {
                v: T,
                h: g,
                side: g
            },
            "center-right": {
                v: T,
                h: g,
                side: g
            }
        }, Nn[C][nn] = function() {
            var e, r, s, u, a;
            if (this[W]) {
                t[i][o][ht](this[j]);
                return
            }
            e = this, r = this[n], s = t._[w](r[tt]), u = this[h], u[S](E, t._[w](r[E]))[S](U, t._[w](r[U])), t._.vars[Mt] == "ios" && (r[U] == "100%" && !r[rt] && u[S](U, "-webkit-calc(" + t._[w](r[U]) + " + 70px)"), u.on(Nt, "input,select,textarea", function(n, r) {
                if (r) return;
                window[v](function() {
                    t[i][P][ht](e[j]), window[v](function() {
                        t[i][o][ht](e[j])
                    }, 500)
                }, 500)
            })), a = this[bt][r[b]], u[Bt]("skel-layer-" + r[b]).data(st, r[b]);
            switch (a.v) {
                case R:
                    u[S](R, 0);
                    break;
                case y:
                    u[S](y, 0);
                    break;
                case T:
                    u[S](R, "50%")[S]("margin-top", Gt + t.getHalf(r[U]))
            }
            switch (a.h) {
                case k:
                    u[S](k, 0);
                    break;
                case g:
                    u[S](g, 0);
                    break;
                case T:
                    u[S](k, "50%")[S]("margin-left", Gt + t.getHalf(r[E]))
            }
            this[lt][s][nn](this), r[rt] && r.exclusive && (t[i][Kt][Bt](Y), t[i][l] = this), this[W] = J
        }, Nn[C][It] = function() {
            var e, r;
            if (!this[W]) {
                t[i][P][ht](this[j]);
                return
            }
            e = this[n], r = t._[w](e[tt]), r in this[lt] || (r = yt), this[lt][r][It](this), e[rt] && e.exclusive && t[i][l] === this && (t[i][Kt][Wt](Y), t[i][l] = x), this[W] = H
        }, Nn[C].init = function() {
            var r = this[n],
                i = e(this[j]),
                s = this;
            i[O](), i[At](an).each(function() {
                t.parseInit(e(this))
            }), i[Bt]("skel-layer").data(ot, this.index)[S](it, t[n].baseZIndex)[S](b, "fixed")[S]("-ms-overflow-style", "-ms-autohiding-scrollbar")[S]("-webkit-overflow-scrolling", "touch")[It]();
            switch (r.orientation) {
                case "vertical":
                    i[S]("overflow-y", Ft);
                    break;
                case "horizontal":
                    i[S](D, Ft);
                    break;
                case yt:
                default:
            }
            if (!r[b] || !(r[b] in this[bt])) r[b] = "top-left";
            r[en] || (r[en] = this[bt][r[b]][en]);
            if (!r[tt] || typeof r[tt] !== $t && !(r[tt] in this[lt])) r[tt] = yt;
            r.clickToHide && i[At]("a")[S](nt, zt).on("click.skel-layers", function(r) {
                var i, o, u = e(this);
                if (u.hasClass("skel-layers-ignore")) return;
                r[kt](), r[Et](), s[It]();
                if (u.hasClass("skel-layers-ignoreHref")) return;
                i = u[Lt]("href"), o = u[Lt]("target"), typeof i !== gt && i != "" && window[v](function() {
                    o == "_blank" && t._.vars[Mt] != "wp" ? window.open(i) : window.location.href = i
                }, t[n][dt] + 10)
            }), i.on("touchstart", function(e) {
                s[St] = e[et][tn][0].pageX, s[xt] = e[et][tn][0].pageY
            }).on("touchmove", function(e) {
                var t, n, o, u, a, f, l;
                if (s[St] === x || s[xt] === x) return;
                t = s[St] - e[et][tn][0].pageX, n = s[xt] - e[et][tn][0].pageY, o = i.outerHeight(), u = i.get(0).scrollHeight - i[B]();
                if (r[rt] && r.swipeToHide) {
                    a = H, f = 20, l = 50;
                    switch (r[en]) {
                        case k:
                            a = n < f && n > -1 * f && t > l;
                            break;
                        case g:
                            a = n < f && n > -1 * f && t < -1 * l;
                            break;
                        case R:
                            a = t < f && t > -1 * f && n > l;
                            break;
                        case y:
                            a = t < f && t > -1 * f && n < -1 * l
                    }
                    if (a) return s[St] = x, s[xt] = x, s[It](), H
                }
                if (i[B]() == 0 && n < 0 || u > o - 2 && u < o + 2 && n > 0) return H
            }), this[h] = i
        }, Nn[C][Z] = function() {
            return this[h] !== x
        }, Nn[C][Yt] = function() {
            return this[h].is(":visible")
        }, Nn[C][d] = function() {
            t[i][o][ht](this[h])
        }, Nn[C][m] = function() {
            if (!this[h][Ot]()) return;
            t[i][P][ht](this[h])
        }, Nn[C].resume = function(r) {
            if (!this[Z]()) return;
            this[h][At](an).each(function() {
                t.parseResume(e(this))
            }), this[n][rt] || this[nn](r)
        }, Nn[C].suspend = function() {
            if (!this[Z]()) return;
            this[h][r](), this[h][At](an).each(function() {
                t.parseSuspend(e(this))
            }), this[W] && this[It]()
        }, t = {
            cache: {
                visibleWrapper: x,
                body: x,
                exclusiveLayer: x,
                html: x,
                htmlbody: x,
                hiddenWrapper: x,
                layers: {},
                window: x,
                wrapper: x
            },
            config: {
                baseZIndex: 1e4,
                layers: {},
                speed: 250,
                transform: J,
                transformBreakpoints: x,
                transformTest: x
            },
            eventType: "click touchend",
            show: function(e) {
                t._[Pt](function() {
                    t[i][I][e][nn]()
                })
            },
            hide: function(e) {
                t._[Pt](function() {
                    t[i][I][e][It]()
                })
            },
            toggle: function(e) {
                t._[Pt](function() {
                    var n = t[i][I][e];
                    n[Yt]() ? n[It]() : n[nn]()
                })
            },
            getBaseFontSize: function() {
                return t._.vars.IEVersion < 9 ? 16.5 : parseFloat(getComputedStyle(t[i][Kt].get(0)).fontSize)
            },
            getHalf: function(e) {
                var t = parseInt(e);
                return typeof e == "string" && e.charAt(e[z] - 1) == "%" ? Math.floor(t / 2) + "%" : Math.floor(t / 2) + Qt
            },
            lockView: function(e) {
                t[i][wt]._skel_layers_scrollPos = t[i][wt][B](), e == sn && t[i][on][S](D, rt), t[i][L].on(X, function(e) {
                    e[kt](), e[Et](), t[i][l] && t[i][l][It]()
                }), t[i][wt].on(mt, function(e) {
                    t[i][l] && t[i][l][It]()
                }), t._.vars.isMobile || window[v](function() {
                    t[i][wt].on(vt, function(e) {
                        t[i][l] && t[i][l][It]()
                    })
                }, t[n][dt] + 50)
            },
            parseInit: function(n) {
                var r, s, o = n.get(0),
                    u = n[Lt]("data-action"),
                    a = n[Lt]("data-args"),
                    c, h;
                u && a && (a = a.split(","));
                switch (u) {
                    case "toggleLayer":
                    case "layerToggle":
                        n[S](nt, zt)[S]("cursor", "pointer"), r = function(n) {
                            n[kt](), n[Et]();
                            if (t[i][l]) return t[i][l][It](), H;
                            var r = e(this),
                                s = t[i][I][a[0]];
                            s[Yt]() ? s[It]() : s[nn]()
                        }, n.on(t.eventType, r);
                        break;
                    case "navList":
                        c = e(un + a[0]), r = c[At]("a"), s = [], r.each(function() {
                            var t = e(this),
                                n, r;
                            n = Math.max(0, t.parents("li")[z] - 1), r = t[Lt]("href"), s.push('<a class="link depth-' + n + '"' + (typeof r !== gt && r != "" ? ' href="' + r + '"' : "") + '><span class="indent-' + n + '"></span>' + t.text() + "</a>")
                        }), s[z] > 0 && n[jt]("<nav>" + s.join("") + "</nav>");
                        break;
                    case "copyText":
                        c = e(un + a[0]), n[jt](c.text());
                        break;
                    case "copyHTML":
                        c = e(un + a[0]), n[jt](c[jt]());
                        break;
                    case "moveElementContents":
                        c = e(un + a[0]), o[f] = function() {
                            c[M]().each(function() {
                                var t = e(this);
                                n[ht](t), t[Bt](_)
                            })
                        }, o[N] = function() {
                            n[M]().each(function() {
                                var n = e(this);
                                c[ht](n), n[Wt](_), t.refresh(n)
                            })
                        }, o[f]();
                        break;
                    case "moveElement":
                        c = e(un + a[0]), o[f] = function() {
                            e(V + c[Lt]("id") + '" />').insertBefore(c), n[ht](c), c[Bt](_)
                        }, o[N] = function() {
                            e(ut + c[Lt]("id")).replaceWith(c), c[Wt](_), t.refresh(c)
                        }, o[f]();
                        break;
                    case "moveCell":
                        c = e(un + a[0]), h = e(un + a[1]), o[f] = function() {
                            e(V + c[Lt]("id") + '" />').insertBefore(c), n[ht](c), c[S](E, Ft), h && h[Ct]()
                        }, o[N] = function() {
                            e(ut + c[Lt]("id")).replaceWith(c), c[S](E, ""), h && h[S](E, "")
                        }, o[f]();
                        break;
                    default:
                }
            },
            parseResume: function(e) {
                var t = e.get(0);
                t[f] && t[f]()
            },
            parseSuspend: function(e) {
                var t = e.get(0);
                t[N] && t[N]()
            },
            recalc: function(e, n) {
                var r = t._.parseMeasurement(e),
                    i;
                switch (r[1]) {
                    case "%":
                        i = Math.floor(n * (r[0] / 100));
                        break;
                    case "em":
                        i = t.getBaseFontSize() * r[0];
                        break;
                    default:
                    case Qt:
                        i = r[0]
                }
                return i
            },
            recalcH: function(n) {
                return t.recalc(n, e(window)[U]())
            },
            recalcW: function(n) {
                return t.recalc(n, e(window)[E]())
            },
            refresh: function(r) {
                var s;
                t[n][F] && (r ? s = r.filter(q) : s = e(q), s[O]()[Vt](t[i][o]))
            },
            unlockView: function(e) {
                e == sn && t[i][on][S](D, W), t[i][L].off(X), t[i][wt].off(mt), t._.vars.isMobile || t[i][wt].off(vt)
            },
            init: function() {
                n in t[n] && (t._.extend(t[n], t[n][n]), delete t[n][n]), t._[_t](t[n], function(e) {
                    t[n][e] && typeof t[n][e] == $t && b in t[n][e] && (t[n][I][e] = t[n][e], delete t[n][e])
                }), t[n][ln] && (t[n][F] = t[n][ln]());
                if (t[n][F]) {
                    if (t._.vars[Mt] == "android" && t._.vars.deviceVersion < 4 || t._.vars[Mt] == "wp") t[n][F] = H;
                    t._.vars.IEVersion < 10 && (t[n][F] = H), t[n][Ut] && !t._.hasActive(t._[fn](t[n][Ut])) && (t[n][F] = H)
                }
                t[i][wt] = e(window), t.initTransforms(), t.initObjects(), t._[Pt](function() {
                    t.initLayers(), t.initIncludes(), t._.updateState(), t.refresh()
                })
            },
            initIncludes: function() {
                e(".skel-layers-include").each(function() {
                    t.parseInit(e(this))
                })
            },
            initLayers: function() {
                var r, s, o, u = 1;
                t._[_t](t[n][I], function(r) {
                    var s;
                    if (!(b in t[n][I][r])) return;
                    if (!t[n][I][r][jt] && (s = e(un + r))[z] == 0) return;
                    o = new Nn(r, t[n][I][r], u++), t[i][I][r] = o, s && (s[M]()[Vt](o[j]), s.remove())
                })
            },
            initObjects: function() {
                t._[Pt](function() {
                    t[i][jt] = e(jt), t[i][Kt] = e(Kt), t[i][on] = e("html,body"), t[i][Kt].wrapInner('<div id="skel-layers-wrapper" />'), t[i][L] = e("#skel-layers-wrapper"), t[i][L][S](b, rn)[S](k, "0")[S](g, "0")[S](R, "0")[O](), t[i][P] = e('<div id="skel-layers-hiddenWrapper" />')[Vt](t[i][Kt]), t[i][P][S](U, "100%"), t[i][o] = e('<div id="skel-layers-visibleWrapper" />')[Vt](t[i][Kt]), t[i][o][S](b, rn), t._[pt](at, t[i][P][0]), t._[pt]("skel_layers_visibleWrapper", t[i][o][0]), t._[pt]("skel_layers_wrapper", t[i][L][0]), e("[autofocus]").focus()
                })
            },
            initTransforms: function() {
                if (t[n][F]) e.fn[r] = function() {
                    return e(this)[s](0, 0)
                }, e.fn[s] = function(t, n) {
                    return e(this)[S](F, "translate(" + t + "px, " + n + "px)")
                }, e.fn[O] = function() {
                    return e(this)[S]("backface-visibility", rt)[S]("perspective", "500")[qt]("transition", "transform " + t[n][dt] / 1e3 + "s ease-in-out")
                };
                else {
                    var o, u = [];
                    t[i][wt].resize(function() {
                        if (t[n][dt] != 0) {
                            var e = t[n][dt];
                            t[n][dt] = 0, window[v](function() {
                                t[n][dt] = e, u = []
                            }, e)
                        }
                    }), e.fn[r] = function() {
                        for (var r = 0; r < this[z]; r++) {
                            var s = this[r],
                                o = e(s);
                            u[s.id] && o.animate(u[s.id], t[n][dt], "swing", function() {
                                t._[_t](u[s.id], function(e) {
                                    o[S](e, u[s.id][e])
                                }), t[i][Kt][S](D, W), t[i][L][S](E, Ft)[S](G, 0)
                            })
                        }
                        return e(this)
                    }, e.fn[s] = function(r, s) {
                        var o, f, l, c;
                        r = parseInt(r), s = parseInt(s), r != 0 ? (t[i][Kt][S](D, rt), t[i][L][S](E, t[i][wt][E]())) : l = function() {
                            t[i][Kt][S](D, W), t[i][L][S](E, Ft)
                        }, s < 0 ? t[i][L][S](G, Math.abs(s)) : c = function() {
                            t[i][L][S](G, 0)
                        };
                        for (o = 0; o < this[z]; o++) {
                            var h = this[o],
                                p = e(h),
                                d;
                            if (!u[h.id])
                                if (d = Nn[C][bt][p.data(st)]) {
                                    u[h.id] = {};
                                    switch (d.v) {
                                        case T:
                                        case R:
                                            u[h.id][R] = parseInt(p[S](R));
                                            break;
                                        case y:
                                            u[h.id][y] = parseInt(p[S](y))
                                    }
                                    switch (d.h) {
                                        case T:
                                        case k:
                                            u[h.id][k] = parseInt(p[S](k));
                                            break;
                                        case g:
                                            u[h.id][g] = parseInt(p[S](g))
                                    }
                                } else d = p[b](), u[h.id] = {
                                    top: d[R],
                                    left: d[k]
                                };
                            a = {}, t._[_t](u[h.id], function(e) {
                                var n;
                                switch (e) {
                                    case R:
                                        n = t[Zt](u[h.id][e]) + s;
                                        break;
                                    case y:
                                        n = t[Zt](u[h.id][e]) - s;
                                        break;
                                    case k:
                                        n = t[Q](u[h.id][e]) + r;
                                        break;
                                    case g:
                                        n = t[Q](u[h.id][e]) - r
                                }
                                a[e] = n
                            }), p.animate(a, t[n][dt], "swing", function() {
                                l && l(), c && c()
                            })
                        }
                        return e(this)
                    }, e.fn[O] = function() {
                        return e(this)[S](b, "absolute")
                    }
                }
            }
        }, t)
    }(jQuery))
});

2 个答案:

答案 0 :(得分:2)

您可以使用vh单位设置元素的高度。

#cta {
  height: 100vh;
}

请检查浏览器支持:http://caniuse.com/#feat=viewport-units

答案 1 :(得分:0)

使用绝对定位

#cta {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 400px; /* Adjust as needed */
    left: 100px; /* To get it centered  */
    background-color: blue; 

}

See working demo here