在我的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))
});
答案 0 :(得分:2)
答案 1 :(得分:0)
使用绝对定位
#cta {
position: absolute;
bottom: 0;
height: 100%;
width: 400px; /* Adjust as needed */
left: 100px; /* To get it centered */
background-color: blue;
}