zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    客户端发现响应内容类型为“text/html”,但应该是“text/xml”
    [转]AJAX Control Toolkit 介绍及构建开发环境
    kafka删除topic详解
    influxdb问题解决
    logback配置
    kafka环境搭建测试
    Hdu 1753 大明A+B <高精度小数相加>
    POJ 1966 <点连通度>
    POJ 2446 Chessboard 二分图的最大匹配 <建图>
    Hlg 1522 子序列的和 <单调队列>
  • 原文地址:https://www.cnblogs.com/sallet/p/4140321.html
Copyright © 2011-2022 走看看