css样式控制元素固定在底部

浏览数：39 / 时间：2015年06月09日

回复固定在底部：css样式用到了

box-sizing属性

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

position:absolute 绝对布局

bottom:0　　　　　　距离底部的距离

<div class="page" id="forum_details" data-pageTitle="查看全文">
    <div class="all_text">
        <div class="talk_item">
            <div class="top">
                <span class="fr">话题12</span>
                <h2>
                    微信昵称123<strong>07-19</strong>
                </h2>
            </div>
            <p class="mid">
                两市今天涨跌互现，个股活跃度虽然较低，但估值较适中、有成长性或者在改革大势里有成长潜力的公司得到市场认同
            </p>
        </div>
        <div class="all_text_reply">
            <p>
                <strong>张三：</strong>根据证券经纪业务的相关规定及财富证券集中交易系统使用规。
            </p>
            <p class="reply">
                <strong>王五 回复 张三：</strong>根据证券经纪业务的相关规定及财富证券集中交易系统使用规。
            </p>
        </div>
    </div>
    <div style="width: 100%; padding: 0 1.5rem; box-sizing: border-box; position: absolute; bottom: 0;">
        <a href="javascript:void(0);" class="mod_btn">回 复</a>
    </div>

    <!-- 弹窗 -->
    <div class="window" style="display: none;">
        <div class="window_area">
            <textarea name="comment" id="comment" cols="30" rows="10"
                placeholder="140个字以内"></textarea>
            <span class="btn_box"> <a href="javascript:void(0);"
                class="cancel">取消</a> <a href="javascript:void(0);" class="ok">发送</a>
            </span>
        </div>
    </div>
</div>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css样式控制元素固定在底部