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="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样式控制元素固定在底部的更多相关文章
- php部分:网页中报表的打印,并用CSS样式控制打印的部分;
网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...
- css 样式控制文本过长实现省略号
css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...
- 3种纯css方法控制元素隐藏显示
1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...
- python + selenium webdriver 复合型css样式的元素定位方法
<div class="header layout clearfix"></div> 当元素没有id,没有name,没有任何,只有一个class的时候,应该 ...
- css的理解 ----footrt固定在底部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css样式控制 字符个数,多余的字用省略号代替
大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多多指教 <div class="show">大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多 ...
- 用div和css样式控制页面布局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- css样式控制鼠标滑过显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css样式---隐藏元素
1.通过设置width:0;或height:0 2.将元素的opacity设置成0 3.通过定位将元素移出屏幕范围 4.通过text-indent实现隐藏文字的效果 5.通过z-index隐藏一个元素 ...
随机推荐
- js处理浮点数计算误差
众所周知,浮点计算会产生舍入误差的问题,比如,0.1+0.2,结果应该是0.3,但是计算的结果并不是如此,而是0.30000000000000004,这是使用基于IEEE754数值的浮点计算的通病,j ...
- 如何在Ionic2项目中使用第三方JavaScript库
onic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库. 因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东 ...
- IX Samara Regional Intercollegiate Programming Contest F 三分
F. Two Points time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- t4-editor使用方法 Visual T4
原文发布时间为:2011-05-17 -- 来源于本人的百度文章 [由搬家工具导入] http://visualstudiogallery.msdn.microsoft.com/40a887aa-f3 ...
- RazorExtensions Templated Razor Delegates
原文发布时间为:2011-04-27 -- 来源于本人的百度文章 [由搬家工具导入] Templated Razor Delegates David Fowler turned me on to a ...
- wap提交表单
原文发布时间为:2010-08-31 -- 来源于本人的百度文章 [由搬家工具导入] <%@ page contentType="text/vnd.wap.wml" page ...
- Serializable在C#中的作用及其优点
原文发布时间为:2009-10-27 -- 来源于本人的百度文章 [由搬家工具导入] Serializalbe - Enable the object can be Serialized into a ...
- 网页制作教程:td也可以溢出隐藏显示【转】
原文发布时间为:2010-02-05 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri ...
- PE文件格式---节和节表
17.1.4 节表和节 从排列位置来看,PE文件在DOS部分和PE文件头部分以后就是节表和多个不同的节(如图17.1中的③和④所示).要理解什么是节表,什么是节以及它们之间的关系,那就首先要了解Wi ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---2
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下: <Linux命令行与shell脚本 ...