Question

我正在开发一个移动响应网站。

我有固定位置的导航菜单。在我关闭导航菜单div后，我有一个必须在它下面的图像。问题是图像在菜单的固定div下。

这是什么解决方案？

我希望黄色横幅在导航栏下完全可见。现在它落后于它。

这是我所拥有的一个例子： enter image description here

HTML code：

<!DOCTYPE html>
<html >
<body style="height:100%;"> 
    <div data-role="panel" id="menu" class="" style="padding: 45px 0; margin: 0; " >
        <div class="ui-panel-inner">
            // the main menu in the background 
        </div>  
    </div>

    <div id="superDiv" style="background-color: white; -webkit-transition: width 2s; transition: width 2s; height: 130%; ">
        <div class="main" style="height: 100%;"> 
            <div class="sidebar"> 

                // menu items

            </div>


                <div class="header_space"></div> // I used this but it's now working good with precentages.. 
                <img src="banner.png" id="mob-banner"/> // this is the banner

                <div class="dynamicPage"> 
                    // content of the page.. 
                </div>



        </div>
    </div> 
</body>
</html>

CSS代码：

/******************/
/*** MOBILE ******/
/****************/

.header_space{
    display: none;
    height: 5.1%;
}

#mob-menu-btn{
    display: none;
}

.sub-menu{
    display: none;
}

#mob-home-btn{
    display: none;
}

#mob-logo{
    display: none;
}

#mob-banner{
    display: none;
}

.makeFixed{
    position: fixed;
}

/*****************************************************************/

@media (max-width: 604px)  {

    .main{
        width: 100%;
        /*overflow: hidden;*/
        overflow-x: hidden;

    }

    .sidebar{
        float: initial;
        width: 100%;
        padding: 0;
        position: fixed;
        z-index: 100;
        background-image: url('top_background.png');
        text-decoration: none;


    }

    .header_space{
        display: inherit;
        height: 4.7%;
    }

    .sports{
        /*display: none;*/
        padding: 0 ;
        background-color: #fff;
        margin: 0;
        width:100%;

    }

    .list{
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
        top: -10%;
        overflow: hidden;
        overflow-y: auto;
        height: 880%;
        display: none;
    }

    .sports li{
        list-style-image:none;
        list-style-type: none;
        border-bottom: 2px solid #eeeeee;
        margin-bottom: 0px; 
        margin-left: 0px; 
        /*padding-top: 15px;
        padding-bottom: 15px;*/
        padding-left: 10px;
        width:100%;
        font-family: arial;
        text-decoration: none;
        overflow: hidden;
        /*height: 27px;*/
        z-index: 100;
    }

    .sports a li {
        text-decoration: none;
    }

    .sports2{
        display: none;
        margin-bottom: 0;
        overflow: hidden;
    }

    .sub-menu{
        display: inherit;
        float: left; 
        cursor: pointer;
        width: 30px;
        /*margin-right: 20px;*/
        position: relative;
        bottom: 7px;
        z-index: 900;
        position: relative;
        top: 7px;
        padding-right: 17px;
    }

    .sports2 li{
        list-style-image:none;
        list-style-type: none;
        border-bottom: 0px solid #eeeeee;
        margin-bottom: 0px; 
        margin-left: 0px; 
        /*padding-top: 15px;
        padding-bottom: 15px;*/
        padding-left: 0px;
        width:100%;
        font-family: "arial";
        text-decoration: none;
        overflow: hidden;
    }
    .sports2 div{
        padding: 15px 0;
    }


    #mob-menu-btn{
        float: right;
        width: 10%;
        display: inherit;
        cursor: pointer;
        margin-top: 0.8%;
    }

    #mob-home-btn{
        display: inherit;
        cursor: pointer;
        margin-top: 0.8%;
        width: 10%;
        float: left;
    }

    #mob-logo{
        display: inherit;
        text-align: center;
        margin: 0.2% auto;  
        width: 30%;
    }

    #mob-banner{
        display: inherit;
    }

    .banner{
        display: none;
    }

    .content{
        width:100%;
        background-color: white;
    }

    .logo{
        padding-top: 1px;
    }

    #cat-header{
        display: none;
    }

    .line{
        display: none;
    }

    .table {
        width: 100%;
    }




    #top-pages{
        display: none;
    }

    .top-pages{
        display: none;
    }

    .category-link{
        float:left; 
        padding-top: 25px; 
        width: 510px; 
        padding: 15px 0;
    }

    .content h1 {
        color:#031c3f; 
        font-size:24px;
        text-align: left;
        font-family: "UScoreRGK";
        margin-left: 7px;
    }

    .content p {
        margin-left: 10px;
        margin-right: 10px;
    }

    #active_line{
        margin-left: 10px;
        margin-right: 10px;
    }

    #menu {
        z-index: 0;
        top: 0px;
        position: absolute;
        /*right: 0px!important;
        left: auto!important;*/
    }

    #menu li {
        list-style: none!important;
    }


}




@media (min-width : 414px) and (max-width : 533px) {

    .category-link{
        width: 460px;
    }


}

@media (min-width : 375px) and (max-width : 414px) {
    .category-link {
        width: 340px;
    }

    .wcmText ul, ol{
        margin: 0 0 1em -2.5em;
    }

    .wcmText p{
        margin-top: 0;
    }

    .wcmText h1, h2{
        margin-top: 0;
        margin-bottom: 0;
        font-size: 110%;
    }
}

@media (min-width : 360px) and (max-width : 375px) {
    .category-link {
        width: 282px;
    }

    .sidebar{
        height: 38px;
    }
}

@media (min-width : 320px) and (max-width : 360px) {

    .wcmText ul, ol{
        margin: 0 0 1em -2.5em;
    }

    .wcmText p{
        margin-top: 0;
    }

    .wcmText h1, h2{
        margin-top: 0;
        margin-bottom: 0;
        font-size: 110%;
    }

}

@media (min-width : 240px) and (max-width : 320px) {

    .sidebar{
        background-image: url('top_background-320-2.png');
        height: 52px;
    }

    #mob-menu-btn {
        width: 7%;
        margin-top: 4.8%;
        margin-right: 4%;
    }

    #mob-home-btn {
        width: 7%;
        margin-top: 4.8%;
        margin-left: 4%;
    }

    #mob-logo {
        margin: 2% auto;
        width: 45%;
    }

    .header_space {
        height: 52px;
    }

    .list {
        width: 99.5%;
        overflow: hidden;
        overflow-y: auto;
        top: -9%;
        overflow: hidden;
        overflow-y: auto;
        height: 803%;
    }

    .sports li {
        width: 96%;
    }

    .content h1 {
        color:#031c3f; 
        font-size:24px;
        text-align: left;
        font-family: "UScoreRGK";
        margin-left: 7px;
    }

    .content p {
        margin-left: 10px;
        margin-right: 10px;
    }

    .category-link{
        float:left; 
        padding-top: 25px; 
        width: 230px;
        padding: 15px 0;
    }
}

Answer 1

看起来你唯一想要让“.header_space”工作的东西就是添加 style =“height：100％;”到你的HTML标签

<html style="height: 100%;">

或在您的CSS中

html { height:100% }

所有高度属性，例如BODY标记上的“height：100％”都不起作用。

但是，我不认为你的解决方案是优雅的。我更愿意添加

@media (max-width: 604px)  {
    /* lets say 50px is the height of your mobile menu */
    #mob-banner { margin-top: 50px; }
}

到处理移动视图的媒体查询，而不是

<div class="header_space"></div>

如何在其下方创建一个带有<img/>标记的移动导航栏（位置：固定）？

1 个答案: