CODEWITHSUNDEEP
htmlcss
dzona
dzona

Reputation: 3751

stick button to bottom of element

Is there any way to stick child button element to bottom of parent element when number of child elements vary?

Parent element is fixed height, and could be scrolled vertically in case of child overflow. In that case, button should be at the end of child list, but in case there is no children, or children size don't push parent element to overflow, it should be at bottom of parent element.

Is there pure css solution for this?

Thanks

Upvotes: 3

Views: 8647

Answers (3)

Sven van Zoelen
Sven van Zoelen

Reputation: 7229

Ok, i don't know if i really understand your question but here is a try:

The 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>

The 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 */
}

This code generates a div that's 200px high with the button in the bottom. If there are any options in the ul, then the button gets pushed down and will always stay on the end of the list.

Hope this helps!

Upvotes: 1

AGuyCalledGerald
AGuyCalledGerald

Reputation: 8150

Here is an idea:

.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>

Hope this helps

Upvotes: 1

easwee
easwee

Reputation: 15905

*Edited for a more solid approach:

Basically if I understand correctly you could use the sticky footer logic - just inside a panel:

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;}

Working sample: http://jsfiddle.net/9SHdN/47/ (uncomment the commented out <p> to see scroll on long text)

Upvotes: 4

Related Questions