wake-up-neo.net

cSS-Position: relativ; bleib unten

<body style="min-height:2000px;">
    <div id="test" style="position:relative;bottom:0;">
         some dynamically changed content
    </div>
</body>

Was erwarte ich:
- Wenn die #test-Höhe größer oder gleich der Körpergröße ist, sollte sie unten bleiben (wie es jetzt der Fall ist, da cuz des Blockmodells ist)
- Wenn die #test-Höhe geringer ist als die Körpergröße, sollte sie jedoch am unteren Rand haften und einen Leerraum darüber haben. (was nicht passiert, #test bleibt nicht unten).

- Verwendung von Position: absolut ist nicht akzeptabel da dann #test die Körpergröße nicht beeinflusst, wenn #test höher als body ist.
- Verwendung von Position: Fixed ist nicht akzeptabel da #test am unteren Rand des Fensters haften bleibt, nicht am Hauptteil.

F: Kann ich das bekommen, was ich erwarte? nur mit css? Wie?

Sorry für schlechtes Englisch, aber ich denke, die Frage ist leicht zu verstehen.
Vielen Dank.

P.S .: Ich brauche das in css, da einige dynamisch geänderte Inhalte über js geändert werden, und ich möchte vermeiden, dass die #test div-Position bei jeder Änderung neu berechnet wird.

UPD:

Ich habe auch ein paar display:inline-block; vertical-align:bottom; Sachen ausprobiert noch kein Ergebnis.

UPD2:

Vielen Dank, trotzdem scheint es, dass es am einfachsten ist, ein paar Zeilen zu meinem Javascript hinzuzufügen, um die Körpergröße auf #test Höhenänderung neu zu berechnen.

16
sander

Aufgrund der dynamischen Höhe von #test können Sie dies nicht mit CSS alleine tun. Wenn Sie jedoch bereits jQuery verwenden, sollte ein schneller Aufruf von .height () in der Lage sein, das zu erhalten, was Sie benötigen (#Test-Höhe muss von der Positionierung von 2000px von oben abgezogen werden).

<style>
body {
    min-height: 2000px;
}

#test {
    position: relative;
    top: 2000px;
} 
</style>

<script>
var testHeight = $("#test").height();
$( "#test" ).css({
    margin-top: -testHeight;
});
</script>
8
Durthar

Ich weiß, dass es eine alte Frage ist, aber Sie könnten es versuchen:

top: 100%;
transform: translateY(-100%);

Transform funktioniert mit der Größe des Elements selbst, daher klettert es ganz unten auf den Container. Sie können Buchstaben für alle 3 Achsen verwenden.

7
librewolf

Die einzigen zwei reinen CSS-Methoden zum Erstellen klebriger Fußzeilen mit dynamischer Höhe, die ich kenne, sind die Verwendung von Flexboxen (leider keine Unterstützung in IE9-) und die Verwendung von CSS-Tabellen :

html, body {
    height: 100%;    
    margin: 0;
}
body {
    display: table;
    width: 100%;
    min-height:2000px;
}
#test {
    display: table-footer-group;
    height: 1px; /* just to prevent proportional distribution of the height */
}
4
Ilya Streltsyn

Es ist sehr gut möglich, relative Position zu verwenden. Das ist wie man es macht. 

Angenommen, die Höhe der Fußzeile wird 40 Pixel betragen. Ihr Container ist relative und die Fußzeile ist ebenfalls relative. Alles was Sie tun müssen, ist bottom: -webkit-calc(-100% + 40px);. Ihre Fußzeile befindet sich immer am unteren Rand Ihres Containers.

HTML wird so sein 

<div class="container">
  <div class="footer"></div>
</div>

CSS wird so sein

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.footer{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Live-Beispiel hier

Hoffe das hilft. 

3
Aditya Ponkshe
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* IE6 */
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}   

JSFiddle: http://jsfiddle.net/As3bP/ - Position: behoben; Dies ist der naheliegende Weg, und wenn dies Auswirkungen auf Ihr Layout hat, versuchen Sie, Ihre Probleme hier zu veröffentlichen. Es ist einfacher, das CSS Ihres Inhalts zu ändern, als nach einem anderen Weg zu suchen.

Der IE6-Ausdruck ist überhaupt nicht gut für die Geschwindigkeit, aber er funktioniert, lesen Sie hier: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions -7202.html

EDIT Lesen Sie Ihre Änderungen, bitte vergessen Sie die obigen Angaben. Wenn Sie am unteren Rand des Körpers stecken, ist es einfach, ihn in Ihrem HTML-Code zu positionieren. Dies ist ganz einfach, bitte posten Sie Beispielcode, wenn Sie weitere Hilfe benötigen. Positionieren Sie etwas am unteren Rand der Seite, standardmäßig am unteren Rand der Seite.

JSFiddle: http://jsfiddle.net/TAQ4d/ wenn Sie das wirklich brauchen.

1
Nick Bull

wenn Sie position:absolute; left:0; bottom:0; nicht verwenden möchten, versuchen Sie es mit einfachen margin-top:300px;...

0

kurze Antwort: Nein, Sie können dies nicht mit reinem CSS tun, da dies nur die umgekehrte Richtung zum normalen Seitenfluss ist (ii meine von unten nach oben);
Sie können dieses Plugin verwenden, das sehr einfach zu bedienen ist stickyjs ;
benutze es mit bottomSpacing: 0 

EDIT
auch diese feste position!
dann denke ich, du solltest es selbst aufschreiben oder jemanden haben, der es für dich aufschreibt: D

0
Homam

Ja, es ist nur mit CSS möglich:

HTML:

<body>
    <div id="test">
        some dynamically
        changed content
    </div>
</body>

CSS:

body{
    line-height: 2000px;
}

#test{
    display: inline-block;
    vertical-align: bottom;
    line-height: initial;
}

JSFiddle

Wenn Sie den Text am unteren Bildschirmrand anzeigen möchten, können Sie Folgendes verwenden:

body {
    line-height: 100vh;
    margin: 0px;
}
0
CHlM3RA

hier ist eine Lösung, mit der ich komme

<ul class="navbar">

    <li><a href="/themes-one/Welcome"> Welcome <i></i></a></li>
    <li><a href="/themes-one/Portfolio"> Portfolio <i></i></a></li>
    <li><a href="/themes-one/Services"> Services <i></i></a></li>
    <li><a href="/themes-one/Blogs"> Blogs <i></i></a><i class="arrow right"></i>
        <ul class="subMenu">
            <li><a href="/themes-one/Why-Did-Mint-Net-CMS-Born"> Why Did Mint Net CMS Born <i></i></a></li>
            <li><a href="/themes-one/Apply-AJAX-and-Mansory-in-gallery"> Apply AJAX and Mansory in gallery <i></i></a></li>
            <li><a href="/themes-one/Why-did-Minh-Vo-create-Mint-Net-CMS"> Why did Minh Vo create Mint Net CMS <i></i></a></li>
        </ul>
    </li>
    <li><a href="/themes-one/About"> About <i></i></a></li>
    <li><a href="/themes-one/Contact"> Contact <i></i></a></li>
    <li><a href="/themes-one/Estimate"> Estimate <i></i></a></li>


</ul>

<style>

    .navbar {
        display: block;
        background-color: red;
        height: 100px;
    }

    li {
        display: table-cell;
        vertical-align: bottom;
        height: 100px;
        background-color: antiquewhite;
        line-height: 100px;
    }

    li > a {
        display: inline-block;
        vertical-align: bottom;
        line-height:initial;
    }

    li >ul {
        display: none;
    }


</style>
0
Võ Minh