父元素隨子元素寬度自動撐開問題, 父元素overflow: auto; 有滾動條時

tomlingtm 發(fā)布于2019-08-22 16:48 / 3013人閱讀

摘要：直接上代碼這里我用了得到的效果這里本來想要的是里面的元素要隨著它的子集的寬度變化而自動撐滿但是得到的效果則是元素寬度與的寬度一致這里我分析是因為得到了它父元素的可視寬度于是想要的效果卒當(dāng)然這里是可以用來計算最里面的寬度然后給賦值的我沒有這樣

直接上代碼:


        
        
    


// css 這里我用了sass
.father {
    width: 200px; height: 400px; border: 1px solid red; overflow: auto;
    .child {
        background: #ccc;
        div {
            width: 400px; height: 900px;
        }
    }
}

得到的效果

這里本來想要的是里面的child元素要隨著它的子集div的寬度變化而自動撐滿, 但是得到的效果則是child元素寬度與father的寬度一致, 這里我分析是因為 width得到了它父元素的可視寬度. 于是想要的效果卒!!!.
當(dāng)然這里是可以用js來計算最里面的寬度然后給child賦值的. 我沒有這樣做是因為js的成本要比css的成本高很多.
然后到Stack Overflow上面搜索我想要的答案. 這里說一下, 程序上的問題還是要多上Stack Overflow查靠譜很多.

.father {
    width: 200px; height: 400px; border: 1px solid red; overflow: auto;
    .child {
        background: #ccc; 
        min-width: 100%; display: inline-block; // 這里加上這兩個屬性
        div {
            width: 400px; height: 900px;
        }
    }
}

滾動條拖到最后面也是一樣撐開.

還有一種是給child元素加上display:table; 屬性也是可以的.

GPU云服務(wù)器云服務(wù)器父元素元素父節(jié)點(diǎn) iframe父元素 html刪除父元素

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94672.html

相關(guān)文章

父元素隨子元素寬度自動撐開問題, 父元素overflow: auto; 有滾動條時

摘要：直接上代碼這里我用了得到的效果這里本來想要的是里面的元素要隨著它的子集的寬度變化而自動撐滿但是得到的效果則是元素寬度與的寬度一致這里我分析是因為得到了它父元素的可視寬度于是想要的效果卒當(dāng)然這里是可以用來計算最里面的寬度然后給賦值的我沒有這樣直接上代碼: // css 這里我用了sass .father { width: 20...

ixlei 2019-08-29 15:12 評論0 收藏0
解決滾動條突然出現(xiàn)導(dǎo)致的頁面錯位問題

摘要：而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐，或者滾動條消失，都是為了避免滾動條從無到有這個突發(fā)過程?！　∮袝r候在一個寬高固定的容器中，需要加載更多內(nèi)容，如果設(shè)置了overflow:auto，加載更多內(nèi)容時，子元素的大小超過父容器，就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下：　　　　先來復(fù)習(xí)一下ov...

617035918 2019-04-23 10:22 評論0 收藏0
解決滾動條突然出現(xiàn)導(dǎo)致的頁面錯位問題

摘要：而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐，或者滾動條消失，都是為了避免滾動條從無到有這個突發(fā)過程。有時候在一個寬高固定的容器中，需要加載更多內(nèi)容，如果設(shè)置了overflow:auto，加載更多內(nèi)容時，子元素的大小超過父容器，就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下：先來復(fù)習(xí)一下overflow的...

timger 2019-04-22 17:02 評論0 收藏0
解決滾動條突然出現(xiàn)導(dǎo)致的頁面錯位問題

摘要：而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐，或者滾動條消失，都是為了避免滾動條從無到有這個突發(fā)過程。有時候在一個寬高固定的容器中，需要加載更多內(nèi)容，如果設(shè)置了overflow:auto，加載更多內(nèi)容時，子元素的大小超過父容器，就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下：先來復(fù)習(xí)一下overflow的...

Faremax 2019-04-22 16:34 評論0 收藏0
解決滾動條突然出現(xiàn)導(dǎo)致的頁面錯位問題

摘要：而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐，或者滾動條消失，都是為了避免滾動條從無到有這個突發(fā)過程。有時候在一個寬高固定的容器中，需要加載更多內(nèi)容，如果設(shè)置了overflow:auto，加載更多內(nèi)容時，子元素的大小超過父容器，就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下：先來復(fù)習(xí)一下overflow的...

hedzr 2019-04-22 16:12 評論0 收藏0