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      距离底部的距离

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>

  

posted @   GrandKai  阅读(7245)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
点击右上角即可分享
微信分享提示