html - 修复了顶部栏和内容 Div

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

“break”元素似乎应该被删除。寻找“clearfix”，这是定义应用于第一个 float 元素(TopBar)的类的标准方法。然后，您还可以删除 TopBar 上的“高度”。

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

另一种可能性是在 Container 上使用“display: flexbox”，并在 mainContentDiv 上设置“flex:1”属性，使其占据除了 TopBar 所需高度之外的整个高度。在这种情况下，删除 TopBar 的硬编码高度属性，添加我之前提到的 clearfix 类，以便 TopBar 在其元素处具有相同的高度。