父元素随子元素宽度自动撑开问题, 父元素overflow: auto; 有滚动条时

tomlingtm 发布于2019-08-22 16:48 / 2861人阅读

摘要：直接上代码这里我用了得到的效果这里本来想要的是里面的元素要随着它的子集的宽度变化而自动撑满但是得到的效果则是元素宽度与的宽度一致这里我分析是因为得到了它父元素的可视宽度于是想要的效果卒当然这里是可以用来计算最里面的宽度然后给赋值的我没有这样

直接上代码:


        
        
    


// 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得到了它父元素的可视宽度. 于是想要的效果卒!!!.
当然这里是可以用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云服务器云服务器父元素元素父节点 iframe父元素 html删除父元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94672.html

父元素随子元素宽度自动撑开问题, 父元素overflow: auto; 有滚动条时

摘要：直接上代码这里我用了得到的效果这里本来想要的是里面的元素要随着它的子集的宽度变化而自动撑满但是得到的效果则是元素宽度与的宽度一致这里我分析是因为得到了它父元素的可视宽度于是想要的效果卒当然这里是可以用来计算最里面的宽度然后给赋值的我没有这样直接上代码: // css 这里我用了sass .father { width: 20...

ixlei 2019-08-29 15:12 评论0 收藏0
解决滚动条突然出现导致的页面错位问题

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。　　有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：　　　　先来复习一下ov...

617035918 2019-04-23 10:22 评论0 收藏0
解决滚动条突然出现导致的页面错位问题

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：先来复习一下overflow的...

timger 2019-04-22 17:02 评论0 收藏0
解决滚动条突然出现导致的页面错位问题

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：先来复习一下overflow的...

Faremax 2019-04-22 16:34 评论0 收藏0
解决滚动条突然出现导致的页面错位问题

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：先来复习一下overflow的...

hedzr 2019-04-22 16:12 评论0 收藏0