Высота контейнера 0, независимо от того, насколько большие дети

Question

Самообъясняющий. Я попробовал немало способов, чтобы попытаться это исправить. Контейнер содержит мое основное содержимое, но его высота не удерживается, заставляя мой нижний колонтитул наполовину подниматься на страницу позади него. Моя навигационная панель просто меняет отображение для каждой "страницы" на ноль, а затем блокирует в зависимости от того, какой

HTML

<div id="nav_container">
    <ul>
        <li class="nav_services"><i></i><span>SERVICES</span></li>
        <li class="nav_home nav_active"><i></i><span>HOME</span></li>
        <li class="nav_contact"><i></i><span>CONTACT</span></li>
    </ul>
</div>
<div id="main_container">
   <div id="services_container">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
   </div>
   <div id="home_container">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
   </div>
   <div id="contact_container">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
   </div>
</div>

<div id="footer_container">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>

CSS

#main_container {
    height: auto;
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 20px 0;
}
#contact_container, #home_container, #services_container {
    position: absolute;
    left: 10%;
    width: 80%;
    background-color: #ffffff;
    border: 1px #d4d1ff solid;
    font-size: 17px;
}
#footer_container {
    height: 180px;
    width: 100%;
    color: #ffffff;
    background-color: #080175;
    border-top: #1F242A;
    -moz-transition: top 1s ease;
    -o-transition: top 1s ease;
    -webkit-transition: top 1s ease;
    transition: top 1s ease;
}

Jquery

function page_handler() {
$('.nav_services').click(function () {
    if ($('.nav_services:not(.nav_active)')) {
        $('#services_container').css({
            display: 'block'
        });
        $('#home_container, #contact_container').css({
            display: 'none'
        });
    }
});
$('.nav_home').click(function () {
    if ($('.nav_home:not(.nav_active)')) {
        $('#home_container').css({
            display: 'block'
        });
        $('#services_container, #contact_container').css({
            display: 'none'
        });
    }
});
$('.nav_contact').click(function () {
    if ($('.nav_contact:not(.nav_active)')) {
        $('#contact_container').css({
            display: 'block'
        });
        $('#services_container, #home_container').css({
            display: 'none'
        });
        initialize();
    }
});
}

Answer 1

демоверсия jsBin

Ваши дети стихия, существо position:absolute; удаляются из естественного документооборота и main_container родитель не может содержать их должным образом.

• назначить класс class="content" всем вашим дочерним элементам (для этого и нужны классы)

<div id="main_container">
   <div class="content" id="services_container">SERVICES Lorem ipsum</div>
   <div class="content" id="home_container">HOME Lorem ipsum</div>
   <div class="content" id="contact_container">CONTACT Lorem ipsum</div>
</div>

• установить это .content в position:relative;
• Сделать видимым только первый, используя CSS: .content + .content {display:none;}

#main_container {
  position:relative;
  overflow:auto;
}
.content{
  position:relative;
  left: 10%;
  width: 80%;
  background-color: #eee;
  border: 1px #d4d1ff solid;
}
.content + .content{
   display:none; /* HIDES ALL BUT FIRST ONE */
}
#footer_container {
  height: 180px;
  color: #ffffff;
  background-color: #080175;
}

чем с JQuery вы можете показать / скрыть желаемое .content,

Чтобы достичь этого, добавьте Anchor вроде

               <a href="#home_container">HOME</a>

что будет ссылаться на

<div class="content" id="home_container">Lorem....</div>

При нажатии на этот якорь сначала скрыть все .content элементы, а затем показать тот, идентификатор которого совпадает с нажатием якоря href:

// Get all content elements
var $content = $(".content");

$("#nav_container a").click(function(evt) {
    evt.preventDefault();
    var id = $(this).attr("href");
    $content.hide(); // Hide all
    $(id).show(); // Show only the one which ID matches the anchor href
});