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

时间:2015-04-29 01:29:55

标签: javascript html css

我试图弄清楚如何最好地设置我的网站,但是在我使用jQuery validationEngine验证表单时,最近两天试图解决内容移动问题。

解释我尝试做什么的最简单方法是向您展示我想要的样子here' s 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>

1 个答案:

答案 0 :(得分:1)

你只需要添加margin:0;你的身体风格。

body {
    padding: 0;  
    margin:0;
    }