成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css控制元素高度自適應(yīng)

魏憲會(huì) / 1979人閱讀

摘要：可以采用元素定位的方式使特定元素高度自適應(yīng)。樣式我是頭部信息我要高度自適應(yīng)效果如下注如果需要使用底部，只需在底部加上對(duì)應(yīng)定位元素然后用父級(jí)元素的進(jìn)行控制即可。

?

可以采用元素定位 + padding 的方式使特定元素高度自適應(yīng)。

css 樣式：

html,body{
    height:100%;
    margin:0;
    padding:0;  
}
.wrap {
    height:100%;
    box-sizing: border-box ; 
    position: relative;
    padding: 60px 0 0;   
}
.header {
    height: 60px;
    position: absolute;
    top: 0;
    width: 100%;
}
.content {
    height:100%;
}

html：

<div class="wrap">
        <div class="header">
            我是頭部信息
        div>
        <div class="content">
            我要高度自適應(yīng)
        div>
    div>

效果如下：

注：如果需要使用底部，只需在底部加上對(duì)應(yīng)定位元素然后用父級(jí)元素的padding進(jìn)行控制即可。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1052.html

相關(guān)文章

  • 面試題CSS盒子模型，左右固定寬度，中間自適應(yīng)的五種死法

    摘要：優(yōu)點(diǎn)相比之前布局更具有靈活性缺點(diǎn)脫離文檔流，下面的元素都受影響。 面試題目 假設(shè)高度已知，請(qǐng)寫出三欄布局，左右300px，中間自適應(yīng) showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有幾種方法呢？ 最容易的應(yīng)該想到利用float來(lái)寫，代碼如下 css樣式代碼，以下五種都是用一個(gè)樣式代碼 ...

    leanxi 評(píng)論0 收藏0

  • CSS || 三欄布局，兩邊固定，中間自適應(yīng)

    摘要：實(shí)現(xiàn)基于純實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在結(jié)構(gòu)的最后，否則右側(cè)會(huì)沉在中間內(nèi)容的下側(cè)原理元素浮動(dòng)后，脫離文檔流，后面的元素受浮動(dòng)影響，設(shè)置受影響元素的值即可兩邊固定寬度，中間寬度自適應(yīng)。 1 float實(shí)現(xiàn) 基于純float實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在HTML結(jié)構(gòu)的最后，否則右側(cè)會(huì)沉在中間內(nèi)容的下側(cè) 原理：元素浮動(dòng)后，脫離文檔流，后面的元素受浮動(dòng)影響，設(shè)置受影響元素的margi...

    pcChao 評(píng)論0 收藏0

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

    摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對(duì)屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會(huì)出現(xiàn)意料之外的效果。雖然很多人說(shuō)浮動(dòng)會(huì)用就行、浮動(dòng)過(guò)時(shí)了，但是對(duì)于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...

    yankeys 評(píng)論0 收藏0

  • PC端CSS布局匯總

    摘要：因?yàn)槎撕鸵苿?dòng)端布局差異較大，所以我將兩端布局分開講，本文章將針對(duì)端的布局進(jìn)行講解，以下代碼只寫關(guān)鍵代碼。為了提高網(wǎng)頁(yè)性能，考慮到，表格元素盡量少用，有其他選擇的情況盡量用其他布局。 前言 此文章是 解剖CSS布局原理 的續(xù)集，之前那篇文章講的都是理論，本文章講具體的實(shí)例，根據(jù)自己對(duì)布局的理解與開發(fā)經(jīng)驗(yàn)分為以下幾類。 因?yàn)镻C端和移動(dòng)端布局差異較大，所以我將兩端布局分開講，本文章將針對(duì)P...

    zhangxiangliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<