父 div 没有与孩子一起扩展，为什么不呢？

Question

我的父 div 没有扩展以容纳其子项的高度。我读到： 位置：绝对； 浮动：任意；

两者都毁了这一点。问题是确实包含绝对元素的 div 确实会扩展，但包含此位置的 div：相对；div 没有扩展。我会添加一个查看链接，但我的页面还没有在服务器上（我直接从 Firefox 中的 HTML 查看它。）

澄清：拒绝扩展的是 .banner_section div。

我的 HTML

<header>
    <?php include 'header.php'; ?>
        <div class="menu_section">
            <label for="show-menu" class="show-menu">Show Menu</label>
            <input type="checkbox" id="show-menu" role="button"></input>
                <ul id="menu">
                  <li><a href="index.html">HEM</a>
                    <li><a href="hudvard.html">HUDVÅRD</a>
                    <li><a href="fotvard.html">FOTVÅRD</a>
                    <li><a href="massage.html">MASSAGE</a>
                    <li><a href="tejpning.html">TEJPNING</a>
                    <li><a href="varumarken.html">VÅRA VARUMÄRKEN</a>
                    <li><a href="omoss.html">OM OSS</a>
                    <li><a href="kontakt.html">KONTAKT</a>
                    <li><a href="kontakt.html">ONLINEBOKNING</a>
                    <li><a href="kontakt.html">TELEFONBOKNING</a>
                </ul> 
        </div>
    <div class="banner_section">
      <div class="rslides_container">
        <ul class="rslides">
          <li><img src="images/index_banner.jpg" /></li>
          <li><img src="images/fot_banner.jpg" /></li>
          <li><img src="images/massage_banner.jpg" /></li>
          <li><img src="images/tejpning_banner.jpg" /></li>
          <li><img src="images/hudvard_banner.jpg" /></li>
          <li><img src="images/omoss_banner.jpg" /></li>
        </ul>
      </div>
        <script>
          $(function() {
            $(".rslides").responsiveSlides({
              auto: true, speed: 1500, timeout: 2000, nav: true,
            });
          });
        </script>
    </div>
  </header>

我的 CSS

.banner_section{
    background-color: #83AFB4;
    margin-bottom: 20px;
}
.banner{
    width: 100%;
    height: 269px;
    margin-bottom: 0;
    padding-bottom: 0;
}
.rslides_container {
    margin-bottom: 50px;
    position: relative;
    float: left;
    width: 100%;
    max-width: 960px;
}
.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}

.rslides1_nav {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 0px;
    opacity: 0.7;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 38px;
    background: url("themes.gif") no-repeat scroll left top transparent;
    margin-top: -45px;
}
.prev{
    background: red;
}

.next{
    background: red;
}

Answer 1

好的，看看这个。

我在父横幅中添加了 clearfix，我在这里有一个小提琴：

http://jsfiddle.net/lharby/x6qmtyqo/3/embedded/result/

这是 clearfix css：

.clearfix:after { 
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clear { overflow:hidden; clear:both; height:1px; margin:-1px 0px 0px 0px; font-size:1px; }
.clear-simple {clear:both; }

然后我将 clearfix 类添加到您的banner_section，所以：

<div class="banner_section clearfix">

让我知道这是否适合您（它也会在图像下方添加一个边距，但您在 css 中已指定）。

Answer 2

要让父级依赖子级，你必须让父级

postion:relative

将孩子的宽度和高度设置为任何你想要的，父母会调整它。

让我们看看演示： DEMO