In meinem CSS setze ich die Position eines Elements mit CSS top 0px oben auf der Seite.In jQuery, wie bekomme ich die untere Position des Browsers?
Wie kann ich die Position der Unterseite des Browsers herausfinden? (Ich möchte ein Element am unteren Rand der Seite erzwingen, also unten sichtbar).
Sie sollten in der Lage sein, css zu verwenden: unten: 0px;
Möchten Sie, dass ein Element am unteren Rand des Browserfensters bleibt, während der Benutzer die Seite herunterscrollt oder ein Element am unteren Rand der Seite "hängt", wo auch immer das sein mag?
Wenn Sie # 2 möchten, könnte eine Cross-Browser-CSS-Methode here gefunden werden.
Die untere Position des Browsers ist die Entfernung von oben: 0 nach unten, die der Höhe des Dokuments für den Client entspricht.
$(document).ready(function() {
var bottomPosition = $(document).height();
alert(bottomPosition);
});
Hoffnung ist diese
das ist die Höhe des Dokuments, nicht der untere Teil des Fensters. oder auch die Höhe des Fensters, das ist NICHT die richtige Antwort. –
Hier ist mein Ansatz für ein grundlegendes Element zu helfen, die am unteren Rande der Seite bleiben muss: Es kann leicht wie berechnet werden.
Zuerst das JavaScript. Die "centerBottom" -Funktion ist der Ort, an dem die Aktion stattfindet.
<script type="text/javascript">
/**
* move an item to the bottom center of the browser window
* the bottom position is the height of the window minus
* the height of the item
*/
function centerBottom(selector) {
var newTop = $(window).height() - $(selector).height();
var newLeft = ($(window).width() - $(selector).width())/2;
$(selector).css({
'position': 'absolute',
'left': newLeft,
'top': newTop
});
}
$(document).ready(function(){
// call it onload
centerBottom("#bottomThing");
// assure that it gets called when the page resizes
$(window).resize(function(){
centerBottom('#bottomThing');
});
});
</script>
Einige Stile, um klar zu machen, was wir bewegen. Es kann schwierig sein, Gegenstände absolut zu bewegen, wenn man die Höhe und Breite nicht kennt. DIVs haben in der Regel eine Breite von 100%, wenn nicht angegeben, was möglicherweise nicht das ist, was Sie wollen.
<style type="text/css">
body {
margin: 0;
}
#bottomThing {
background-color: #600; color: #fff; height:40px; width:200px;
}
</style>
Und der Körper der Seite:
<body>
<div id="bottomThing">
Put me at the bottom.
</div>
</body>
zusammen mit position: fixed; –