如何制作父级的块填充宽度(不仅是可见窗口)?

时间:2016-05-17 21:06:20

标签: css

当我水平滚动时,如何使块B像块A一样填充宽度?

HTML:

<div id="main">
  <div style="background-color:coral;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div style="background-color:lightblue;">B</div>
</div>

的CSS:

#main div {
    display: inline-block; /*or block*/
    min-width: 100%;
    height: 50px;
}

https://jsfiddle.net/tombrito/hc9b8s06/1/

1 个答案:

答案 0 :(得分:5)

这是因为块A溢出父节点,块B仅与父节点一样宽。

相反,您应该扩展父级以包含块A.您可以使用

实现此目的
#main {
  display: inline-block; /* (at least) as wide as contents */
  min-width: 100%; /* but grow to fill available space, if any */
}

#main {
  display: inline-block;
  min-width: 100%;
}
#main div {
  display: inline-block; /*or block*/
  min-width: 100%;
  height: 50px;
}
<div id="main">
  <div style="background-color:coral;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div style="background-color:lightblue;">B</div>
</div>