为什么不是保证金底部：[价值]％工作？

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;
});

}）;

这里是小提琴：http://jsfiddle.net/2C4dw/6/

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

Answer 1

侧栏与页脚重叠的原因是因为您将#div_leftBar设置为绝对值。执行此操作时，元素将从流中移除，而不会计入父元素的高度。

你需要在你的CSS中做一些重新分解。尝试使用相对位置并将其向左浮动，只是不要忘记清除浮动。

Answer 2

首先，你必须改变你的结构。将左右div放在主容器中。

喜欢以下

<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 id="seta" src="images/seta.gif"></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 class="main-content">
    <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 style="display: none;" 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 style="display: none;" 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 style="display: none;" 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. </p>
        </div>
      </div>
    </div>
  </div>
  <div style="clear:both"></div>
  <div id="div_footer">
    <div id="footer_socials_container"> <a href="#"> <img onMouseOut="this.src='images/socials/facebook.jpg'" onMouseOver="this.src='images/socials/facebook_hover.jpg'" title="Facebook" alt="Facebook" id="facebook_img" src="images/socials/facebook.jpg"> </a> <a href="#"> <img onMouseOut="this.src='images/socials/twitter.jpg'" onMouseOver="this.src='images/socials/twitter_hover.jpg'" title="Twitter" alt="Twitter" id="twitter_img" src="images/socials/twitter.jpg"> </a> <a href="#"> <img onMouseOut="this.src='images/socials/googlep.jpg'" onMouseOver="this.src='images/socials/googlep_hover.jpg'" title="Google+" alt="Google Plus" id="googlep_img" 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：这将清除你的浮动。

.main-content { overflow:hidden; }

更改此课程#div_leftBar

的样式

#div_leftBar{
    width:15%;
    min-height:60%;      
    margin-bottom:30%;
    padding:0;
    float:left;
}

For live demo refer the Fiddle link

Answer 3

我通过使用浮动使其工作。您必须同时添加.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%;

}