回复固定在底部: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. HDU 3622 Bomb Game(二分+2-SAT)

    Bomb Game Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. Teleportation(tel)

    Teleportation(tel) 题目描述 Zy大帝拥有n个星球,因为距离非常遥远,所以Zy在他所居住的1号星球和他的军事基地霸中所在的2号星球建造了两个传送门,这样从1号星球到2号星球就只需要2 ...

  3. BZOJ3612 [Heoi2014]平衡 整数划分

    [Heoi2014]平衡 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 348  Solved: 273[Submit][Status][Discus ...

  4. Do not use built-in or reserved HTML elements as component id: header

    刚刚在搭建项目时发现控制台报错 查找发现是因为组件名称所致,也就是当我们起名一个header.vue的组件时,我们安装的vue插件会自动把name设置为default 这就造成了错误 把header修 ...

  5. 检测字符串当中x与o的数目是否相等

    题目如上 答案 function XO(str) { var arr = str.split(""), xCount = , oCount = ; var reX = /x/i, ...

  6. Bzoj1879 [Sdoi2009]Bill的挑战

    Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 724  Solved: 363 Description Input 本题包含多组数据. 第一行:一个整数T ...

  7. Mongoose 表实例

    /********** 用户表 BY Jaysir 2015.6.21 *********** *********** 可搜索以下关键词来查看未实现功能 *********** *********** ...

  8. java中的序列化与反序列化,还包括将多个对象序列化到一个文件中

    package Serialize; /** * Created by hu on 2015/11/7. */ //实现序列化必须实现的接口,这就是一个空接口,起到标识的作用 import java. ...

  9. [LeetCode] Longest Substring Without Repeating Characters最长无重复子串

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  10. 【Visual Studio - Dependency Walker】查找程序依赖的动态链接库文件(转)

    原文转自 http://163n.blog.163.com/blog/static/5603555220113151113287/ 有时我们需要知道一个程序依赖哪些动态链接库(DLL)文件.实际上,有 ...