容器高度 0，无论多大 Children

Question

Self-Explanatory。我已经尝试了很多方法来尝试解决这个问题。容器包含我的主要内容，但它的高度不会保持，迫使我的页脚在它后面的页面中途。我的导航栏只是将每个 "page" 的显示更改为 none，然后根据哪个

进行阻止

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 demo

您的子元素 position:absolute; 已从自然文档流中删除，main_container 父元素无法正确包含它们。

将 class class="content" 分配给所有子元素（这就是 classes 的用途）

<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 .

为此，添加一个锚点，例如

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

将引用

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

单击该锚点时，首先隐藏所有 .content 元素，然后显示 ID 与单击的锚点匹配的元素 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
});

容器高度 0，无论多大 Children

Container Height 0, no Matter How Big Children

jquery

css

height

parent