回复固定在底部: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样式控制元素固定在底部的更多相关文章

  1. php部分:网页中报表的打印,并用CSS样式控制打印的部分;

    网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...

  2. css 样式控制文本过长实现省略号

    css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...

  3. 3种纯css方法控制元素隐藏显示

    1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...

  4. python + selenium webdriver 复合型css样式的元素定位方法

    <div class="header layout clearfix"></div> 当元素没有id,没有name,没有任何,只有一个class的时候,应该 ...

  5. css的理解 ----footrt固定在底部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css样式控制 字符个数,多余的字用省略号代替

    大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多多指教 <div class="show">大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多 ...

  7. 用div和css样式控制页面布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. css样式控制鼠标滑过显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. css样式---隐藏元素

    1.通过设置width:0;或height:0 2.将元素的opacity设置成0 3.通过定位将元素移出屏幕范围 4.通过text-indent实现隐藏文字的效果 5.通过z-index隐藏一个元素 ...

随机推荐

  1. 负载平衡(cogs 741)

    «问题描述:G 公司有n 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使n 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬运.«编程任务:对于给定的n 个环 ...

  2. 【HDOJ5514】Frogs(容斥原理)

    题意:n个青蛙在一个有m个节点的圆上跳,m个节点的标号为0-m-1,每只青蛙每次跳的节点数给出,让求n只青蛙所跳位置标号之和 n<=1e4,m<=1e9,a[i]<=1e9 思路:由 ...

  3. AC日记——最高奖励 51nod 1163

    最高的奖励 思路: 排序: 时间为第一关键字,按总小到大排: 价值为第二关键字,按从大到小排: 然后,不难看出,如果两个时间不同: 那么,两个时间之间最少能做一件事: 因为他们的时间下限最少相差1: ...

  4. 安卓edittext实现输入数字限制条件的效果

    我们知道edittext能指定输入字符类型,这次我们就来了解下在数字模式下的一些显示控制输入的效果 1.限制输入数字 android:inputType="number|numberDeci ...

  5. 解决WordPress中字符转义的问题

    wordpress中输入两个"--"的时候会识别成一个横杠,如果此时的文章中有代码在,那么其他人在复制粘贴的时候就没法使用,于是乎我寻找了三种有效的方法解决此问题! WordPre ...

  6. ATOM入坑必备插件

    Atom作为Javascript/CSS/HTML等前端编辑器利器,其强大功能依靠各种插件,以下是笔者在入坑阶段,精挑细选总结出的必不可少的插件,熟悉运用这些插件,一定成吨提高生产效率.安装这些插件只 ...

  7. 【JSOI2007】文本生成器

    用AC自动机处理所有了解的单词 显然,不能直接算,直接算的话,我们需要大力容斥,复杂度不允许 我们不妨反过来做,我们根据AC自动机处理出所有的不可行解,然后用总数减去即可 计算所有不可行解用dp,\( ...

  8. Meet Dgraph — an open source, scalable, distributed, highly available and fast graph databas

    https://dgraph.io/ Meet Dgraph — an open source, scalable, distributed, highly available and fast gr ...

  9. DIV相对于父DIV底部对齐的实现方法

    代码如下 <style type="text/css"> .box1 {border:1px #cccccc solid; width:500px; height:60 ...

  10. Object-C 类

    Classes 类 像其它的面向对象的语言一样,Object-C也提供创建对象的蓝本.即类. 首先我们在类中定义一些能够反复使用的属性和方法. 然后,我们实例化类,即对象,之后就能够使用属性和訪问. ...