如果在容器 div 中，子组件是不是可以填充页面的剩余宽度？

Posted 2023-03-21

【中文标题】如果在容器 div 中，子组件是不是可以填充页面的剩余宽度？

【英文标题】：Is there a way for child component to fill remaining width of page if within a container div?如果在容器 div 中，子组件是否可以填充页面的剩余宽度？

【发布时间】：2021-12-18 14:13:05

【问题描述】：

我希望实现一组填满整个页面宽度的卡片。 但是，我仍然需要将卡片保持在左侧父级的尺寸内，我只需要“打破”右侧的限制。

请参阅附图以帮助更好地解释我想要实现的目标。

左侧保持在父级的尺寸内，但我需要右侧来填充页面的其余部分。

<div class="container">
   <div class="cards">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
   </div>
</div>



.container
    max-width:1020px;
    position:relative;
    margin:0 auto;


.cards
   position:absolute;
   width: 100%; (not sure what to set here to make it fill the remainder of the page instead of just the parent's dimensions)


.card
   width: 268px;
   display:inline-block;

任何帮助将不胜感激。 非常感谢

【问题讨论】：

那么溢出？然后呢？这是某种形式的滑块吗？目前尚不清楚您要达到的目标。

对不起，如果我不清楚。忘记它的滑块方面。我只希望子元素尊重左侧父元素的尺寸。我希望他们能够从右边全宽

显然这是不可能的。坦率地说，我只是将容器从中心移动并将其与右侧对齐，也许使用左边距。问题解决了。

【参考方案1】：

您可以使用网格将其设置为完全响应：

    <div class="container">
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
    </div>
    
    
    
    .container
        max-width:1020px;
        display: grid;
        grid-template-columns: repeat(3, 1fr); // for 3 cards in a row, fully strached

        // OR

        grid-template-columns: repeat( auto-fill, minmax(150px, 300px) ); // for auto-fill the screen, based on min and max size for each card, and the screen size



        grid-auto-rows: 100px; // set all cards height to 100px, can be changed as well

 
        margin:0 auto;
    
    
    
    .card
       // to fill the all grid-cell completely 
       width: 100%;
       height: 100%;
    

如果您不需要同时处理行和列，请考虑使用 flex 而不是网格。