[分享]css中宽度充满剩下的空间

在CSS中，我们可能需要让一个元素的宽度充满剩下的空间，这样可以使布局更加灵活。比如我们想要让一个div元素的宽度占据其父元素剩下的所有宽度。div{ width: 100; /让div元素宽度占据其...

在CSS中，我们可能需要让一个元素的宽度充满剩下的空间，这样可以使布局更加灵活。比如我们想要让一个div元素的宽度占据其父元素剩下的所有宽度。

div{
  width: 100%; /*让div元素宽度占据其父元素的宽度*/
} 

上面这段代码就是让div元素的宽度充满父元素剩下的空间。

如果我们想让元素占据剩余空间的同时，还要设置一些内边距和边框呢？

div{
  box-sizing: border-box; /*设置盒模型为border-box，让内边距和边框包含在内*/
  width: 100%;
  padding: 10px;
  border: 1px solid #000;
} 

上面这段代码中，我们设置了盒模型为border-box，让内边距和边框包含在元素宽度内。这样可以确保元素宽度充满父元素剩余空间的同时，不会超出父元素的边界。

当然，如果父元素设置了float或者position属性，也可以使用如下代码让子元素宽度充满父元素剩余空间：

.parent{
  float: left; /*设置父元素float属性*/
  width: 50%; /*设置父元素宽度*/
}
.child{
  overflow: hidden; /*让子元素包含浮动元素*/
  width: auto; /*让子元素宽度自适应*/
} 

上面这段代码中，我们让父元素float属性不为空，并设置父元素宽度为50%。子元素overflow属性设置为hidden，让它包含父元素的浮动元素。最后让子元素宽度自适应，就可以让它宽度充满父元素剩余空间了。