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>
    

      

  • 相关阅读:
    关于Django 报错 ImportError: cannot import name RegexUrlResolver解决
    Git版本控制
    java Labmda表达式
    java注解&反射
    maven
    数据库
    为什么java中子类重写父类的方法时声明抛出异常不能比父类范围大
    【Linux】Linux基本命令
    阿里云服务器linux环境搭建SSM项目(一)--Linux环境配置jdk和Tomcat.md
    阿里云服务器linux环境搭建SSM项目(二)--linux环境配置mysql5.7.md
  • 原文地址:https://www.cnblogs.com/sallet/p/4140321.html
Copyright © 2011-2022 走看看