0
我无法为我的网站整理我的布局，基本上底部的页脚被上面的内容覆盖，我无法弄清楚是什么导致了这一点。HTML内容覆盖页脚
这里是 - https://jsfiddle.net/2py4tus9/4/
感谢您的帮助
下面是HTML
html,
body {
height: 100%;
width: 100%;
min-width: 1000px;
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
overflow: auto;
}
#indexWrapper {
width: 100%;
height: 100%;
background-color: #9f1717;
margin-bottom: 100px;
}
#mainContentWrapper {
width: 100%;
height: 100%;
height: auto;
/* position: absolute;*/
min-height: 100%;
/* min-height: 1000px;*/
margin-top: -20px;
/* background-color: #fafafa;*/
background-color: palevioletred;
}
/*----- Tabs -----*/
.tabs {
position: relative;
width: 100%;
height: 100%;
background-color: greenyellow;
display: inline-block;
}
/*----- Content of Tabs -----*/
.tab-content {
float: left;
height: auto;
width: 100%;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
/* background:#fff;*/
background-color: blue;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
.tabContentBox {
width: 50%;
height: auto;
clear: both;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
height: auto;
border-bottom: 4px solid #eee;
padding: 30px;
}
.footerWrapper {
width: 100%;
height: 100px;
background-color: gold;
}<div id="indexWrapper">
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="mainContentWrapper">
<div class="tabContentBox">
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
</div>
<!--end tabContentBox-->
</div>
<!--end mainContentWrapper-->
</div>
<!--tab-->
</div>
<!--end tab-content-->
</div>
<!--end tabs-->
<div class="footerWrapper"></div>
<!--end footerWrapper-->
</div>
<!-- end indexWrapper-->
能否请您解释一下这里发生了什么？我对你想要做的事情有点失落。 – jbutler483
如果你看小提琴类中的内容tabElementBox覆盖在底部的页脚div并导致它不显示，所以我的CSS不太正确 –