jquery - 容器高度为 0，不管 child 多大

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 demo

您的子元素，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>

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