边境不能覆盖两个div

Question

我想使用类wrapper-side-content覆盖两个带边框的div。
高度必须设置为自动和宽度100％。但它并没有按照我的意愿工作。
我已经使用了位置和z-index，但没有用。

这是我的代码：

<style>
.clear{clear:both;}
.pad{padding:5px 0px;}
.header-wrapper,.footer-wrapper,.wrapper-side-content{border:1px solid #e0e0e0; position:relative; border-radius:3px;}
#body-wrapper{max-width:100%; margin:0px auto; padding:0px 0px;}
.wrapper-side-content{max-width:100%; height:auto;}
.header-wrapper,.footer-wrapper{max-width:100%;}
.leftbar-wrapper,.content-wrapper{float:left; display:inline-block;}
.leftbar-wrapper{width:29.8%;}
.content-wrapper{width:69.9%;}
.innerpad{padding:5px;}
</style>

<div id="body-wrapper">
    <div class="header-wrapper innerpad">
        <h1>mywebcom</h1>
    </div>
    <div class="clear pad"></div>
    <div class="wrapper-side-content innerpad">
        <div class="leftbar-wrapper innerpad">
            This is a leftside bar menu
        </div>
        <div class="content-wrapper innerpad">
            This is a main content
        </div>
    </div>
    <div class="clear pad"></div>
    <div class="footer-wrapper innerpad">
        All Rights Reserved. &copy; <?php echo date('Y'); ?> <a href="/" title="" target="top">mywebcom </a>
    </div>
</div>

否则，你有我的CSS建议。

Answer 1

使用float时，必须清除它。将其添加到您的CSS：

.wrapper-side-content::after {
  content: "";
  display: block;
  clear: both;
}

或者，您可以将overflow: hidden;添加到.innerpad：

.innerpad {
  overflow: hidden;
}