html - 使一定宽度的父 div 内的子 div 具有完整的浏览器窗口宽度

Question

我有一个子 div，它需要成为宽度为 1190 像素的父 div 的子 div，但子 div 需要拉伸(stretch)浏览器窗口。我正在使用 position: absolute;左:0； right: 0; 来实现这个。

现在的问题是我的 div 下面的内容与我的绝对定位的 div 重叠，因为它不再在盒子模型中。我可以在腹肌上使用边距底部。定位 div，但它需要是动态的，因为它里面的文本应该能够增加和减少，而我不必更改任何边距。

我读到 placeholder-div 可能会解决这个问题。我不知道该怎么做。我尝试在绝对定位的 div 之上使用“position: relative”创建一个空的 div，但它什么也没做。

HTML:

<div class="bonus-box">
   <div class="container">
      <span class="ribbon1"></span>
      <h3>Bonus Scoring System</h3>
      <div class="list1">
         <h4>Royalities for Back Hands</h4>
         <ul>
            <li><span>12 points for a Royal Flush</span></li>
            <li><span>7 points or Straight Flush</span></li>
            <li><span>4 points for Quads</span></li>
         </ul>
      </div>
      <div class="list2">
         <h4>Royalities for Middle Hands</h4>
         <ul>
            <li><span>24 points for a Royal Flush</span></li>
            <li><span>14 points or Straight Flush</span></li>
            <li><span>8 points for Quads</span></li>
            <li><span>2 points for Full House</span></li>
         </ul>
      </div>
      <div class="list3">
         <h4>Royalities for Front Hands</h4>
         <ul>
            <li><span>3 point for a Three of a Kind</span></li>
         </ul>
      </div>
   </div>
</div>
<!-- end bonus-box -->
<div class="placeholder-div"></div>
<h2>Special Conditions</h2>
<ul class="special-conditions">
   <li>
      <strong>1. Straights:</strong> You need to have straight in the back hand - middle hand and have your top front hand in sequence.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>2. Flushes:</strong> You need to have flushes in the back hand - middle hand and have your top front hand in the same suit.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>3. Six &amp; Half Pairs:</strong> You need to have six pairs in your hand. The last card can make three of a kind.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>4. 13 card wonder:</strong>If you have no pairs in your hand which means you have all cards from A - 2 you get a special bonus.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
</ul>
</div><!-- end content -->

CSS:

.bonus-box {
    background: #3f3f3f;
    overflow: hidden;
    width: 100%;
    position:absolute;
    left:0;
    right:0;
}

Answer 1

占位符 div只有当你有一个静态的 height 时才会起作用在 .bonus-box 上也可以在占位符上设置的容器。既然你说你需要它根据内容自动增加和减少它的大小，这将不起作用，因为占位符 div不知道你的 .bonus-box 的动态大小(除非您要使用 JavaScript，但这绝对可以用纯 CSS 方式处理)。

---

现在，最简单的解决方案是设置 .bonus-box和 .placeholder-div到相同的高度并完成它。您还需要将 <div class="placeholder-div"></div>在.bonus-box之后div ;否则，奖励框将显示在占位符 div 下方因为那是它在页面流中最后已知的静态位置所在的位置。

JSFiddle example here.

这样做，您需要同时修改 height每当文本添加到奖励框或从奖励框中删除时，属性都可以紧密地包含内容 div .

---

但是如果您想以更复杂但更易于维护的方式来做，您可能想要做的是构建它，以便父容器包含一个 min-width的 1190px .该容器的直接子代将全部指定它们的 width成为1190px .但是，奖励框(现在已移至这些直接子项之一)将设置其 width成为100% .

HTML:

<div id="wrapper-main">
    <div class="content-main">
        <p>Sed ut est augue. Etiam ullamcorper, leo a tincidunt commodo, felis justo posuere diam, non tempus libero purus a mauris. Integer suscipit et lectus sollicitudin convallis. Nullam mattis lorem a dui mattis, vel molestie justo mollis. Duis leo felis, cursus vitae ornare condimentum, sagittis non odio. Cras pulvinar ultrices ante, id tincidunt sem volutpat quis. Curabitur mollis ultricies nunc nec aliquam. Aliquam eleifend laoreet lacus, sit amet viverra lorem.</p>
    </div>
    <div class="wrapper-bonus">
        <div class="content-main">
            <p>Cras euismod tristique nibh non semper. Sed iaculis mi sit amet aliquam ultricies. Donec eros eros, auctor et sem vitae, fringilla condimentum nisi. Donec volutpat mauris sit amet convallis accumsan. Nam nec porttitor nulla, placerat suscipit leo. Nam tincidunt, urna a sagittis pulvinar, libero metus iaculis justo, quis fermentum dolor magna vel dui. Vestibulum consectetur mattis neque, at lacinia augue convallis nec. Fusce orci mi, auctor pretium gravida sit amet, feugiat et purus.</p>
        </div>
    </div>
    <div class="content-main">
        <p>Vivamus mollis quis lacus sed auctor. Integer ornare venenatis ultrices. Cras faucibus orci tincidunt enim sollicitudin ornare. Pellentesque dapibus iaculis ante, non imperdiet eros varius venenatis. Nulla facilisi. Cras iaculis tincidunt eros quis aliquam. Etiam mattis leo leo, ut varius tellus gravida non. Aenean id urna hendrerit, gravida leo sed, molestie nibh. Proin accumsan ultricies nulla, adipiscing ultricies urna posuere in. Vestibulum id eros leo. Etiam erat metus, vulputate sit amet lorem sed, adipiscing tempus enim. Nulla et massa sit amet nibh pharetra auctor. Curabitur odio odio, gravida eget nulla sit amet, placerat porta mi.</p>
    </div>
</div>

CSS:

#wrapper-main {
    min-width: 1190px;
    }

    .content-main {
        margin: 0 auto;
        width: 1190px;
        }

    .wrapper-bonus {
        width: 100%;
        background-color: #f80;
        }

JSFiddle here.

当然，这样做需要对您的代码进行一些重构......无论出于何种原因，这可能会也可能不会。