具有三个导航栏的站点布局

Question

我正在努力弄清楚如何最好地设置我的网站，但在过去两天尝试解决内容移动问题时我使用 jQuery validationEngine 来验证表单。

解释我正在尝试做的事情的最简单方法是向您展示我希望它看起来像什么 here's a jsfiddle

主导航栏下方的小导航栏将包含用户的相对位置。

当我使内容 div 变大时，它会在用户滚动时溢出顶部。我想知道我如何设置它以便内容在两个栏后面滚动并且不会出现在顶部。我不知道顶部的缝隙是从哪里流出来的。

此外，当我修复它时。我能否在内容 div 中使用 jQuery validationEngine 而不会到处乱跳。

Stack 正在寻找代码所以

test.html

    <!DOCTYPE html>
    <html>
    <head>
      <title>Tester</title>

    <style>
    body {
        padding: 0;  
    }
    .wrapper {
        margin:0 auto;
        width: 1000px;
    }
    .static {     
        width:1000px;
        z-index:2;
        height:120px;
        position: fixed;   
    }
    .header {
        background-color:Silver;
        height:100px;
    }

    .location {
        background-color:yellow;
        height:20px;
    }

    .content {
        background-color:Orange;
        width:800px;
        height:1500px;
        float: left;
        position:relative;
        top: 120px;
        scroll:hidden;
    }
    .menu {
        background-color:Green;
        position: relative;
        left: 800px;
        width:200px; 
    }

    </style>


    </head>
    <body>


    <div class="wrapper">
        <div class="static">
            <div class="header">
                Header
            </div> 

            <div class="location">
               Location
            </div>

            <div class="menu">
                Menu
            </div>  
        </div>
        <div class="content">
            Content
        </div>    

    </div>


    </body>
    </html>

Answer 1

您只需要margin:0;添加您的体型。

body {
    padding: 0;  
    margin:0;
    }

具有三个导航栏的站点布局

Layout for site with three navbars

html

javascript

css