亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

修復了頁腳與垂直滾動條重疊的問題

修復了頁腳與垂直滾動條重疊的問題

藍山帝景 2023-10-30 20:44:02
頁腳頁腳的代碼如下:<div class="wrapper">    <footer class="help1">        <div class="row help1">            <div class="container">                <div class="col span-1-of-2">                    <div class="container">                        <i class="fas fa-phone fa-3x phone-img"></i>                        <p>Contact Details: +00 0000 0000 | +22 1212 2323</p>                    </div>                </div>                <div class="col span-1-of-2 help">                    <div class="container">                        <p class="email"> <strong>Email-address</strong> :[email protected]</p>                    </div>                </div>            </div>        </div>    </footer></div>CSS代碼如下: .help1    {        background-color: black;        color:white;        position: absolute;        bottom: 0;        width: 100%;        /* Footer height */    }    .wrapper    {   height:15%;    }頁腳與垂直滾動條重疊。任何幫助,將不勝感激
查看完整描述

1 回答

?
吃雞游戲

TA貢獻1829條經驗 獲得超7個贊

您是否正在尋找這樣的解決方案。這是一個彈性盒實現示例。


body {

    margin: 0;

}


.help1 {

    background-color: black;

    color: white;

    position: relative;

    bottom: 0;

    width: 100%;

    margin-top: auto;

}


.wrapper {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}

<div class="wrapper">

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <footer class="help1">

        <div class="row help1">

            <div class="container">

                <div class="col span-1-of-2">

                    <div class="container">

                        <i class="fas fa-phone fa-3x phone-img"></i>

                        <p>Contact Details: +00 0000 0000 | +22 1212 2323</p>

                    </div>

                </div>


                <div class="col span-1-of-2 help">

                    <div class="container">

                        <p class="email"> <strong>Email-address</strong> :[email protected]</p>

                    </div>

                </div>

            </div>

        </div>

    </footer>

</div>


查看完整回答
反對 回復 2023-10-30
  • 1 回答
  • 0 關注
  • 131 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號