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


    回复固定在底部: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=" 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>
    

      

  • 相关阅读:
    【转】centos7关闭图形界面启动系统
    回顾测试入行以来的一些感受,浅谈对测试管理方面一些见解
    linux安装完全踩坑手册
    selenium 自动化测试个人总结(一)
    性能测试之数据库篇-查询(五 补充)
    性能测试之数据库篇-查询(四)
    性能测试之数据库篇-查询(三)
    性能测试之数据库篇-查询(二)
    性能测试之数据库篇-查询(一)
    性能测试之数据库篇-查询
  • 原文地址:https://www.cnblogs.com/sallet/p/4140321.html
Copyright © 2020-2023  润新知