0

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

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

我读到placeholder-div可能会解决这个问题。我不知道该怎么做。我在绝对定位的 div 上尝试了一个空 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;
}
4

2 回答 2

1

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

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

JSFiddle 示例在这里。

这样做，您将需要修改这两个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在这里。

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

于 2013-09-27T21:49:36.047 回答
0

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

为了使某个宽度的父 div 中的子 div 的宽度大于父 div（在这种情况下拉伸到整个浏览器窗口宽度），我使用了 'position: absolute; 左：0；右：子 div 上的 0'。我在子 div 内还有一个名为 container 的 div，它将 div 居中，margin: 0 auto。

现在的主要部分是在子 div 下有一个占位符 div（在我的例子中是奖励框），我需要使占位符 div 的高度等于“奖励框”div 的高度。我为此使用了一些 jQuery，如下所示：

$(".placeholder-div").css({'height':($(".bonus-box").height()+'px')});

$(".placeholder-div").height($(".bonus-box").height());

var highestCol = Math.max($('.placeholder-div').height(),$('.bonus-box').height());

$('.placeholder-div').height(highestCol);

这很好用，现在绝对定位的 div 可以根据需要包含尽可能多的内容，而不会影响其他页面元素的定位。

于 2013-09-28T04:40:03.350 回答