javascript - 为什么 margin-bottom 不是 :[value]% working?

Question

我不明白为什么 margin-bottom 在 .leftBar_fundo 中没有按预期工作。我尝试了 #div_leftBar 中的所有 div，但它仍然不起作用。当我在 leftBar 中打开两个或多个 div 时，它们展开并最终与 footer 重叠。我想当我展开 div 时，页脚也会下降。但是 margin-bottom 并没有真正起作用。我使用 jQuery 使内容出现和消失。 HTML代码:

<div class="body_container">
                <div id="div_header">
                    <div id="nav">
                        <div id="nav_wrapper">
                            <ul>
                                <li><a href="#">Example</a></li><li>
                                <a href="#">Example</a></li><li>
                                <a href="#">Example</a></li><li>
                                <a href="#">Example</a></li><li>
                                <a href="#">Example</a></li><li>
                                <a href="#">Example <img src="images/seta.gif" id="seta"/></a>
                                    <ul>
                                        <li><a href="#">Example</a></li><li>
                                        <a href="#">Example</a></li><li>
                                        <a href="#">Example</a></li><li>
                                        <a href="#">Example</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>


                    </div>
                </div>

                <div id="div_leftBar">
                        <div class="leftBar_fundo">
                            <div class="leftBar_wrapper">
                                <ul>
                                    <li class="top_li">
                                        <a class="top_link" href="">OPENS</a>
                                        <ul class="hidden_ul">
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                        </ul>

                                    </li>
                                    <li class="top_li">
                                        <a class="top_link" href="">OPENS</a>
                                        <ul class="hidden_ul">
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                        </ul>

                                    </li>
                                    <li class="top_li">
                                    <a class="top_link" href="">OPENS</a>

                                    <ul class="hidden_ul">
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                        </ul>   
                                    </li>
                                    <li class="single_li"><a class="top_link_alone" href="">Example</a></li>
                                    <li class="single_li"><a class="top_link_alone" href="">Example</a></li>
                                    <li class="single_li"><a class="top_link_alone" href="">Example</a></li>
                                </ul>
                            </div>      
                    </div>  
                </div>



                <div class="div_content">
                    <div class="internal_div_content">
                        <div class="calendario_container">
                            <img src="images/calendario/calendario_jul.png" class="calendario_imagem" />
                            <h4 class="dia_calendario" >14</h4>
                        </div>

                        <h1 class="content_title">Título de exemplo</h1>
                        <hr style="width:100%; position:relative; top:1%" />

                        <div class="text_div_content">
                            <p>Ullam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiuLorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                            Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede molliUllam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet.
                        </div>
                    </div>
                </div>



                <div id="div_footer">
                    <div id="footer_socials_container">
                        <a href="#">
                            <img src="images/socials/facebook.jpg" id="facebook_img" alt="Facebook" title="Facebook" onmouseover="this.src='images/socials/facebook_hover.jpg'" onmouseout="this.src='images/socials/facebook.jpg'" />
                        </a>
                        <a href="#">
                            <img src="images/socials/twitter.jpg" id="twitter_img" alt="Twitter" title="Twitter" onmouseover="this.src='images/socials/twitter_hover.jpg'" onmouseout="this.src='images/socials/twitter.jpg'" />
                        </a>
                        <a href="#">
                            <img src="images/socials/googlep.jpg" id="googlep_img" alt="Google Plus" title="Google+" onmouseover="this.src='images/socials/googlep_hover.jpg'" onmouseout="this.src='images/socials/googlep.jpg'" />
                        </a>
                        <span id="seguir_mensagem">Lorem Ipsum Dolor</span>
                    </div>

                    <div id="footer_container">
                        <div id="col1_container">
                            <ul id="footer_col1">
                                <h4>Example:</h4>
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                            </ul>
                        </div>

                        <div id="col2_container">
                            <ul id="footer_col2">
                                <h4>Example:</h4>
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                            </ul>
                        </div>


                        <div id="col3_container">
                            <ul id="footer_col3">
                                <h4>Example:</h4>   
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                            </ul>
                        </div>



                    </div>
                </div>
            </div>

和CSS代码:

  body{
    margin:0px;
    padding:0px;
    background-color:#ffcc66;
    font-size:18px; 

}
.body_container {
    position: relative;
    height:1000px;

}

#div_header {
    background-color:#0000ff;
    width:100%;
    height:25%;
    padding:0px;
    margin-bottom:3%;
}

 /* Nav bar at the top of the page */

#nav{
    background-color: #222;
    position:relative;
    top:80%;
}

#nav_wrapper{
    width:100%;
    margin:0 auto;
    text-align:left;

}

#nav ul{
    list-style-type:none;
    padding:0;
    margin:0;
    position:relative;
    z-index:10;

}

#nav ul li{
    display:inline-block;
    padding:15px;
}

#nav ul li:hover{
    background-color: #333;

}

#nav ul li a,visited{
    color: #ccc;
    display:block;

    text-decoration:none;

}

#nav ul li a:hover{
    color: #ccc;
    text-decoration:none;
}

#nav ul li:hover ul{
    display:block;
}

/* Segundo conjunto de Links */

#nav ul ul{
    display:none;
    position:absolute;
    top:51px;
    left:476px;
    background-color: #333;
    padding:10px;
    margin:0;
    border:5px solid #222;
    border-top:0;
    min-width:200px;

}

#nav ul ul li{
    display:block;
    padding:10px;
    margin-top:0px;
}

#nav ul ul li a, visited{
    color: #ccc;
}

#nav ul ul li a:hover{
    color:#899;
}
#seta{
    position:relative;
    top:2px;

}

/*Left bar*/

#div_leftBar{
    width:15%;
    min-height:60%;
    position:absolute;
    top:45%;
    margin-bottom:30%;
    padding:0;
}

.leftBar_fundo{
    background-color:#222;
    position:relative;
    margin-bottom:30%;
}

.leftBar_wrapper{
    padding:15% 10% 10% 0%;
    margin-bottom:20%;
    position:relative;
    height:100%;
}

/* Content that is "underneath" .top_li*/

.hidden_ul{
    margin-top:20%;
    padding:0;
    position:relative;
    overflow:hidden;
    clear:both;
}

.hidden_ul li{
    margin-left:20%;
    padding:0;
    list-style-type:initial;
    font-size:14px;

}

.hidden_ul li a:hover{
    color:#999;

}

.top_li{
    margin:0;
    padding:0;
    border:2px solid #222;
    border-radius:16px;
}

.top_li:hover{
    border:2px solid #333;

}

.top_link{
    padding-left:15%;

}

.top_link_alone{
    padding-left:15%;

}

.single_li{
    padding-left:15%;
    border:2px solid #222;
    border-radius:16px;

}

.single_li:hover{
    border:2px solid #333;

}

.leftBar_wrapper ul{
    list-style-type:none;

}

.leftBar_wrapper ul li{
    padding:8% 0 8% 0;
    color:#fff;

}

.leftBar_wrapper ul li:hover{
    background-color:#333;


}

.leftBar_wrapper ul li a, visited{
    text-decoration:none;
    color:#fff;


}


div.div_content{
    background-color:green;
    width:60%;
    min-height:85%;
    position:relative;
    left:18%;
    border:2px solid green;
    border-radius:25px;
    padding:10px;
    margin:0 0 5% 0;

}

.internal_div_content{
    position:relative;
    height:100%;
    border: 2px solid green;
    border-radius:25px;

}

.text_div_content{
    margin:3% 0 0 0;
    text-align:justify;
    text-indent:10%;


}

.calendario_container{
    width:90px;
    height:90px;
    position:relative;
    left:6%;
    top:1%;
    float:left;
    z-index:9;
    margin-right:0;
    padding-right:0;

}

.dia_calendario{
    position:absolute;
    top:30%;
    left:34%;
    font-size:23px;

}

.calendario_imagem{
    position:relative;
    width:90px;
    height:90px;

}

h1.content_title{
    text-align:center;

}

    /* Footer of the page */        

#div_footer{
    background-color:orange;
    width:100%;
    height: 40%;
    position:relative;
    padding:0px;
    margin-top:20%; 
}

#div_footer div ul li a{
    text-decoration:none;
    color:#777;

}

#div_footer div ul li a:visited{
    color:#777;

}

#div_footer div ul li a:active{
    color:#555;

}

#div_footer ul {
    width: 100%;
    float: left;
    padding:3% 0 5% 20%;
    color:white;
}

#div_footer ul li {
    margin:0 0 0 0;
    padding:0 0 1% 0;
    list-style-type:none;
}

#div_footer div ul li a:hover{
    color:#999;
}

#footer_container{
    background-color:blue;
    width:100%;
    position:relative;
    top:15%;
    height:85%;
    margin:0;
    padding:0;

}

#col1_container{
    position:absolute;
    left:0;
    height:100%;
    width:15%;

}

#col2_container{
    position:absolute;
    left:14%;
    height:100%;
    width:15%;

}

#col3_container{
    position:absolute;
    left:28.5%;
    height:100%;
    width:15%;

}

#col1_container, #col2_container, #col3_container{
    margin:0;
    padding:0;
    position:absolute;


}

#footer_col1, #footer_col2, #footer_col3{
    margin:0;
    padding:0;
    position:relative;
    right:5%;
    top:18%;

}

Javascript 代码:

$(document).ready(function() {
$('.hidden_ul').hide();
$(".top_link").click(function(){
    $(this).toggleClass("active").next().slideToggle("medium");
    return false;
});

});

这是 fiddle :http://jsfiddle.net/2C4dw/6/

我应该怎么做才能避免这种情况并让它发挥作用？

Answer 1

我通过使用 float 使其工作。您必须同时添加 .div_content和 .left_container float:left;然后放<div class="clear"></div>就在你的页脚之前。 HTML代码:

<div class="left_container">
    <div id="div_leftBar">
        <div class="leftBar_fundo">
            <div class="leftBar_wrapper">
                <ul>
                    <li class="top_li">
                        <a class="top_link" href="">Example</a>
                            <ul class="hidden_ul">
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                                <li><a href="">Example</a></li>
                            </ul>

                            </li>
                            <li class="top_li">
                                <a class="top_link" href="">Example</a>
                                    <ul class="hidden_ul">
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>
                                        <li><a href="">Example</a></li>

                                    </ul>

                                    </li>
                                    <li class="top_li">
                                    <a class="top_link" href="">Example</a>

                                        <ul class="hidden_ul">
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                            <li><a href="">Example</a></li>
                                        </ul>   
                                        </li>
                                        <li class="single_li"><a class="top_link_alone" href="">Example</a></li>
                                        <li class="single_li"><a class="top_link_alone" href="">Example</a></li>
                                        <li class="single_li"><a class="top_link_alone" href="">Example</a></li>
                                    </ul>
                                </div>  
                            </div>  
                        </div>
                    </div>  

                <div class="div_content">
                    <div class="internal_div_content">
                        <div class="calendario_container">
                            <img src="images/calendario/calendario_jul.png" class="calendario_imagem" />
                            <h4 class="dia_calendario" >14</h4>
                        </div>

                        <h1 class="content_title">Título de exemplo</h1>
                        <hr style="width:100%; position:relative; top:1%" />

                        <div class="text_div_content">
                            <p>Ullam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiuLorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    </div>
                </div>


                <!--Added <div class="clear"></div>-->
                <div class="clear"></div>

                <div id="div_footer">

                </div>

CSS 代码:

    .left_container{
    min-width:15%;
    min-height:60%;
    background-color:green;
    position:relative;
    float:left;
    /* Added float:left */


    }

    #div_leftBar{
        width:100%;
        position:relative;
        margin-bottom:0;
        padding:0;
        z-index:90;

    }

    .leftBar_fundo{
        background-color:#222;
        position:relative;
        z-index:90;
    }

    .leftBar_wrapper{
        padding:15% 10% 10% 0%;
        position:relative;
        z-index:90;
        height:100%;
    }


    .hidden_ul{
        margin-top:20%;
        padding:0;
        position:relative;
        overflow:hidden;
        clear:both;
        z-index:90;
    }

    .hidden_ul li{
        margin-left:20%;
        padding:0;
        list-style-type:initial;
        font-size:14px;

    }

    .hidden_ul li a:hover{
        color:#999;

    }

    .top_li{
        margin:0;
        padding:0;
        border:2px solid #222;
        border-radius:16px;
    }

    .top_li:hover{
        border:2px solid #333;

    }

    .top_link{
        padding-left:15%;

    }

    .top_link_alone{
        padding-left:15%;

    }

    .single_li{
        padding-left:15%;
        border:2px solid #222;
        border-radius:16px;

    }

    .single_li:hover{
        border:2px solid #333;

    }

    .leftBar_wrapper ul{
        list-style-type:none;

    }

    .leftBar_wrapper ul li{
        padding:8% 0 8% 0;
        color:#fff;

    }

    .leftBar_wrapper ul li:hover{
        background-color:#333;


    }

    .leftBar_wrapper ul li a, visited{
        text-decoration:none;
        color:#fff;


    }

    div.div_content{
    background-color:green;
    width:60%;
    min-height:85%;
    position:relative;
    border:2px solid green;
    border-radius:25px;
    padding:10px;
    margin:0 0 5% 3%;
    float:left;
    /* Added float:left */

}

 /* Added .clear */
.clear{
    clear:both;

}

.internal_div_content{
    position:relative;
    height:100%;
    border: 2px solid green;
    border-radius:25px;

}

.text_div_content{
    margin:3% 0 0 0;
    text-align:justify;
    text-indent:10%;


}

.calendario_container{
    width:90px;
    height:90px;
    position:relative;
    left:6%;
    top:1%;
    float:left;
    z-index:9;
    margin-right:0;
    padding-right:0;

}

.dia_calendario{
    position:absolute;
    top:30%;
    left:34%;
    font-size:23px;

}

.calendario_imagem{
    position:relative;
    width:90px;
    height:90px;

}

h1.content_title{
    text-align:center;

}



#div_footer{
    background-color:#000;
    width:100%;
    height: 40%;
    position:relative;
    padding:0px;
    margin-top:0%;  
}

#div_footer div ul li a{
    text-decoration:none;
    color:#777;

}

#div_footer div ul li a:visited{
    color:#777;

}

#div_footer div ul li a:active{
    color:#555;

}

#div_footer ul {
    width: 100%;
    float: left;
    padding:3% 0 5% 20%;
    color:white;
}

#div_footer ul li {
    margin:0 0 0 0;
    padding:0 0 1% 0;
    list-style-type:none;
}

#div_footer div ul li a:hover{
    color:#999;
}

#footer_container{
    background-color:#000;
    width:100%;
    position:relative;
    top:15%;
    height:85%;
    margin:0;
    padding:0;

}

#col1_container{
    position:absolute;
    left:0;
    height:100%;
    width:15%;

}

#col2_container{
    position:absolute;
    left:14%;
    height:100%;
    width:15%;

}

#col3_container{
    position:absolute;
    left:28.5%;
    height:100%;
    width:15%;

}

#col1_container, #col2_container, #col3_container{
    margin:0;
    padding:0;
    position:absolute;


}

#footer_col1, #footer_col2, #footer_col3{
    margin:0;
    padding:0;
    position:relative;
    right:5%;
    top:18%;

}