html – 如何将宽度拉伸到可滚动区域的100％？

概述我想将红色div拉伸到可滚动区域的100％,即具有蓝色宽度但没有硬编码红色宽度. .outer { overflow: auto;}.blue { width: 200em; background: blue;}.red { width: 100%;/*does not work */ background: red;} <div class="outer"> 我想将红色div拉伸到可滚动区域的100％,即具有蓝色宽度但没有硬编码红色宽度.

.outer {  overflow: auto;}.blue {  wIDth: 200em;  background: blue;}.red {  wIDth: 100%;/*does not work */  background: red;}

<div >  <div >    Test  </div>  <div >    Test  </div></div>

https://codepen.io/anon/pen/bxqEMy

解决方法 如果您可以更改HTML,请添加另一个包装器,如下所示：

.container {  overflow: auto;}.outer {  display: inline-block;}.blue {  wIDth: 200em;  background: blue;}.red {  background: red;}

<div >  <div >    <div >      Test    </div>    <div >      Test    </div>  </div></div>

或者,您可以使用CSS变量将blue元素的wIDth声明移动到父元素,以便您可以在红色元素中使用它：

.outer {  overflow: auto;  --w:200em;}.blue {  wIDth:var(--w);  background: blue;}.red {  wIDth: var(--w);  background: red;}

<div >  <div >    Test  </div>  <div >    Test  </div></div>

总结

以上是内存溢出为你收集整理的html – 如何将宽度拉伸到可滚动区域的100％？全部内容，希望文章能够帮你解决html – 如何将宽度拉伸到可滚动区域的100％？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。