Question

我是HTML和CSS的新手，并且有一些初学者的麻烦。

我希望在顶部有一个固定的导航栏（固定），这样即使用户滚动页面也会粘在顶部。以下是内容页面。

我希望页面如何操作是当用户滚动页面时，内容页面应该位于导航栏下。

在我的情况下，导航栏是固定的，但滚动时内容div覆盖导航栏。

我的代码如下

<div id="Container"> <!--Container Start-->
        <div id="TopBar"><!--TopBar Start-->
            <div class="fixedwidth"> <!-- Fixedwidth Start-->
                <div id="logodiv">   <!-- Logodiv Start-->
                    <img src="images/mascot.jpg"/>
                </div><!-- Logodiv End-->
                <div id="signInDiv">
                    <p><img src="images/orb.png"/>Sign In/Up</p>
                </div>
            </div> <!-- Fixedwidth End-->

        </div><!--TopBar End-->

        <div class="break"></div>

        <div id="mainContentDiv"> <!--Main Content Start-->
            <div class="fixedwidth">
                <div id="Content">

                </div>
            </div>
        </div> <!--Main Content End-->
    </div><!--Container End-->

和css代码如下：

body{
        margin:0;
    }
    #TopBar{
        background-color:#FFFFFF;
        width:100%;
        height:100px;
        color:#174269;
        position:fixed;

        font-weight:bold;
        font-size:1.2em;
        border-bottom:1px ridge black;
    }

    .fixedwidth{

        width:1050px;
        margin:0 auto;

    }

    #logodiv {
        float:left;
        padding-bottom:5px;

    }
    #logodiv img{
        width:188px;
        height:100px;

    }
    #signInDiv{
        float:right


    }
    #signInDiv img{
        position:relative;
        top:6px;

    }
    #signInDiv p{
        position:relative;
        top:20px;

    }
    .break{
        clear:both;
    }

    #mainContentDiv{

        position:relative;
        top:100px;
        width:100%;
        height:1000px;
        background-color: #0C7ECC;
    }

我知道它有一个简单的解决方案，但无法弄明白。

Answer 1

＆＃34;休息＆＃34;元素似乎应该被删除。查找＆＃34; clearfix＆＃34;，这是定义应用于第一个浮动元素（TopBar）的类的标准方法。然后你也可以删除＆＃34; height＆＃34;在TopBar上。

一种可能更简单的方法是为TopBar设置已知高度（比如说50px），并为mainContentDiv的margin-top设置相同的值。文本不会在下面（如您所知），但视觉效果应该相同，因为您的TopBar不透明。

另一种可能性是使用＆＃34;显示：flexbox＆＃34;在Container上，设置＆＃34; flex：1＆＃34; mainContentDiv上的属性，以便它占据整个高度，除了TopBar所需的高度。在这种情况下，删除TopBar的硬编码高度属性，添加我之前提到的clearfix类，以便TopBar的元素高度相同。

修复了Topbar和Content Div

1 个答案: