Question

我有一个子div，需要是一个宽度为1190px的父div的子节点，但是子div需要拉伸浏览器窗口。我正在使用position: absolute; left: 0; right: 0;来实现这一目标。

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

我读到placeholder-div可以解决这个问题。我不知道该怎么做。我在绝对定位的div上尝试了一个空div，其中'position：relative'但是没有做任何事。

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 {{} 1}}。然后，此容器的直接子项将指定其1190px为width。但是，奖励框（现在被移动为其中一个直接子女）会将其1190px设置为width。

HTML：

100%

CSS：

<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>

JSFiddle here.

当然，这样做需要在代码中进行一些重组......无论出于何种原因，这可能会或可能不会发生。

Answer 2

我认为最好的方法是使用一个小jQuery。现在即使纯粹的CSS方法是理想世界中最好的方法，但在现实世界中，最简单，最有效的方法是最好的方法。

要在某个宽度的父div中创建一个子div，其宽度大于父级（在这种情况下，拉伸到完整的浏览器窗口宽度），我使用了'position：absolute;左：0;右：孩子div上的0'。我在子div中也有一个div，称为容器，它以div为中心：0 auto。

现在主要的部分是在子div（我的情况下是奖金框）下有一个占位符-div，我需要使占位符-div的高度等于'bonus-box'div的高度高度。我使用了一些jQuery，可以在下面看到：

。

$（ “占位符-DIV ”）的CSS（{：“ 红利盒”。 '高度'（$（）高度（）+ '像素'）}）;

$（ “占位符-DIV ”）高度（$（“ 奖金盒。”）的高度（））;

var highestCol = Math.max（$（'。placeholder-div'）。height（），$（'。bonus-box'）。height（））;

$（ '占位符-DIV。'）的高度（highestCol）;

这非常有效，现在绝对定位的div可以根据需要提供尽可能多的内容，而不会影响其他页面元素的定位。

在某个宽度的父div中创建Child div具有完整的浏览器窗口宽度

2 个答案: