css控制元素高度自適應

魏憲會發布于2019-04-23 11:43 / 1969人閱讀

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

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

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">
            我要高度自適應
        div>
    div>

效果如下：

注：如果需要使用底部，只需在底部加上對應定位元素然后用父級元素的padding進行控制即可。

云服務器 GPU云服務器高度自適應 textarea自適應高度 iframe高度自適應 iframe自適應高度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1052.html

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

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

leanxi 2019-08-29 17:22 評論0 收藏0
CSS || 三欄布局，兩邊固定，中間自適應

摘要：實現基于純實現的三欄布局需要將中間的內容放在結構的最后，否則右側會沉在中間內容的下側原理元素浮動后，脫離文檔流，后面的元素受浮動影響，設置受影響元素的值即可兩邊固定寬度，中間寬度自適應。 1 float實現基于純float實現的三欄布局需要將中間的內容放在HTML結構的最后，否則右側會沉在中間內容的下側原理：元素浮動后，脫離文檔流，后面的元素受浮動影響，設置受影響元素的margi...

pcChao 2019-08-29 12:12 評論0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮動

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

yankeys 2019-08-29 15:10 評論0 收藏0
PC端CSS布局匯總

摘要：因為端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對端的布局進行講解，以下代碼只寫關鍵代碼。為了提高網頁性能，考慮到，表格元素盡量少用，有其他選擇的情況盡量用其他布局。前言此文章是解剖CSS布局原理的續集，之前那篇文章講的都是理論，本文章講具體的實例，根據自己對布局的理解與開發經驗分為以下幾類。因為PC端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對P...

zhangxiangliang 2019-08-29 13:55 評論0 收藏0