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 накладывает нижний колонтитул внизу и заставляет его не показывать, поэтому мой css не совсем прав –