stick-Taste nach unten element

Gibt es eine Möglichkeit zu kleben Kind button-element bis zum unteren Ende des übergeordneten Elements, wenn die Anzahl der Kind-Elemente variieren?

Eltern-element eine Feste Höhe und kann vertikal scrollen im Fall von Kindern überlaufen. In diesem Fall, der button sollte am Ende der child-Liste, aber in Fall gibt es keine Kinder oder Kinder, Größe don ' T push übergeordneten element zu einem überlauf, es sollte am unteren Rand des übergeordneten Elements.

Ist es Reine css-Lösung dafür?

Dank

  • Ist es möglich für Sie zu tun, eine schnelle mock-up-Grafik?
  • ziemlich sicher, er will es so jsfiddle.net/47UUM außer mit der Schaltfläche versteckt auf dem unteren Rand des übergeordneten div. Dies ist ein heikles problem.
  • Ich verstehe es dasselbe wie einen sticky footer in einem Schaltschrank.
  • ja
InformationsquelleAutor dzona | 2012-07-10
  1. 4

    *Bearbeitet für einen solideren Ansatz:

    Im Grunde, wenn ich das richtig verstanden habe könnten Sie die sticky footer Logik - nur in einem Schaltschrank:

    HTML:

    <div class="panel-container">
    <div class="panel-content">
        <div class="wrapper">
            <p>asdfasdfasdfadfs</p>
            <!--<p>asdfasdfasdfadfs<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>-->
            <div class="push"></div>
        </div>
        <div class="footer">
            <button>Click click!</button>
        </div>
    </div>
</div>

    CSS

    .panel-container {width:300px;height:300px;margin:20px;background:#f2f2f2;overflow:auto;}
.panel-content {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -30px; 
}
.footer, .push {
    height: 30px; /* .push must be the same height as .footer */
}
.footer {background:#ccc;}

    Beispiel arbeiten:
    http://jsfiddle.net/9SHdN/47/ (entfernen das Kommentarzeichen in der auskommentierten <p> zu sehen, scrollen auf langen text)

    • ich glaube, er will, dass die Schaltfläche unter der overflow-area - verborgen, bis nach unten gescrollt.
    • du hast Recht - aktualisiert die Antwort.
    InformationsquelleAutor easwee
  2. 1

    Hier ist eine Idee:

    .panel {position:relative;height:300px;width:300px;background:#f2f2f2;overflow:auto;}

.varyingContent { height:280px; display:table-cell; }

.button { position:relative; height:20px;}

<div class="panel">
        <div class="varyingContent">
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        </div>
        <button class="button">test</button>
    </div>

    Hoffe, das hilft

    InformationsquelleAutor AGuyCalledGerald
  3. 1

    Ok, ich weiß nicht, ob ich wirklich verstehe Ihre Frage, aber hier ist ein Versuch:

    Den parent-div:

    <div class="options_div"> 
   <p>Text inside</p>

   <ul class="options">
       <li>option 1</li>
       <li>option 2</li>
       <li>option 3</li>
   </ul>

   <input type="button" name="go" value="Goooo!" />
</div>

    CSS:

    .options_div {
    width: 300px;
    height: 200px;
    overflow: scroll;
}

.options_div>ul {
    list-style: none;
}

.options_div>ul>li {
    /* do what everrrr you want with it */
}

    Dieser code erzeugt einen div-das ist 200px hoch mit der-Schaltfläche in der unteren. Wenn es irgendwelche Optionen im ul, dann wird der button nach unten gedrückt und wird es immer bleiben am Ende der Liste.

    Hoffe, das hilft!

    • Dies versuche ich, aber wenn man zu viele li-Elemente, die beim scrollen angezeigt werden, der button bleibt auf gleicher Höhe. Es sollte am Ende der Liste (nicht sichtbar, bevor scrollen)
    • Ich aktualisierte den code. Die position absolute platziert die Schaltfläche am unteren Rand des div-Elements, statt am Ende der Liste. Ich entfernte die Positionierung der-Taste, es sollte nun an der Unterseite.
    • Nein. Nun ist am Ende der Liste, aber nicht auf der Unterseite des parent-div, wenn es kein scrollen. Sie offensichtlich nicht verstanden Frage
    • Es scheint, dass Sie schon die Antwort. In der Tat, ich immer noch nicht verstehen, Ihre Frage, bitte versuchen Sie, mehr klar, die nächste Zeit.
    InformationsquelleAutor Sven van Zoelen
Schreibe einen Kommentar