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。

要实现这一点，请添加类似

的锚点

               <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，无关紧要有多大的孩子

1 个答案: