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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM