边框不能覆盖两个div

Question

我想用classwrapper-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;
}

边框不能覆盖两个div

Border can not cover two div

html

css

z-index