html - ボタンを要素の下部に貼り付けます

Question

子要素の数が異なる場合に、子ボタン要素を親要素の下部に貼り付ける方法はありますか？

親要素は固定の高さであり、子がオーバーフローした場合に垂直方向にスクロールできます。その場合、ボタンは子リストの最後にある必要がありますが、子がない場合、または子のサイズが親要素をオーバーフローにプッシュしない場合は、親要素の下部にある必要があります。

これに対する純粋なCSSソリューションはありますか？

ありがとう

Answer 1

*より確実なアプローチのために編集：

基本的に、私が正しく理解していれば、スティッキーフッターロジックを使用できます-パネルのすぐ内側：

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

作業サンプル： http： //jsfiddle.net/9SHdN/47/（コメントアウトされたコメントを外し<p>て、長いテキストのスクロールを表示します）

Answer 2

わかりました、私はあなたの質問を本当に理解しているかどうかわかりませんが、ここに試してみてください：

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

このコードは、下部にボタンがある高さ200pxのdivを生成します。ulにオプションがある場合、ボタンは押し下げられ、常にリストの最後に表示されたままになります。

お役に立てれば！

Answer 3

ここにアイデアがあります：

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

お役に立てれば