Question

我的第一个问题。希望这没关系。

我试图重做一个很久以前我一起入侵过的网页。现在它是准系统，而我只是试图让一些主要的东西起作用。我有一个标题，导航栏（在左侧），一个内容部分（在右侧）和一个页脚。导航栏和内容分别位于页眉和页脚的下方和上方。在导航栏中，我有一些＆＃34;按钮＆＃34;当页面滚动时我想向下滚动。除了一件事，它有点工作：

当按钮滚动到底部时，它们会用完导航栏并进入页脚。向上滚动，没问题，它们不会遇到标题。就在他们向下滚动的时候。我想将这些按钮保留在导航栏中。

这是HTML：

    <!DOCTYPE html>
   <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <link type="text/css" rel="stylesheet" href="newpage.css"/>
        <title>Daruma An Farms</title>
    </head>
    <body>
        <div id="header"></div>
        <div id="navBar">
            <div class="inner" id="inner1">Home</div>
            <div class="inner" id="inner2">About</div>
            <div class="inner" id="inner3">Shop</div>
            <div class="inner" id="inner4">Contact</div>
            <div class="inner" id="inner5">日本語</div>
        </div>
        <div id="content"><p>Hello. This is the new page</p>
        <p>Hopefully this stuff will work</p>
        <p>And we can get it up soon!</p>
        </div>
        <div id="copyright">Copyright</div>
    </body>
</html>

这是CSS：

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: white;
    background: #95954a;
} 

div {
    border-radius: 5px;

}
/* This is the header ID. I would like a static pic to go here,
    centered, and stuck at the top. Right now I just have a block header
    as a place holder. 
*/
#header {
    height:259px;
    width: 100%;
    background-color: #965d4a;
    background: url("images/logo4.jpg") no-repeat center top;
}

/*  This is the navbar, which will contain the navigation buttons.
    I want it to be long enough to contain all the buttons and
    have a bit of empty space on the bottom.
*/

#navBar {
    height: 700px;
    width: 13%;
    background-color: #965d4a;
    position: absolute;
    margin: 5px 0px 5px 130px;
    float: left;
}
/*  This is the CSS for the "buttons" in the nav bar.
    I want them to stay on the page when the user scrolls.
    I have separated the common elements into the .inner class
    and put the unique elements into the IDs.
*/

.inner {
    height: 50px;
    width: 12%;
    position: fixed;
    margin-left: 6px;
    padding-top: 10px;
    text-align: center;
    font-size: 2em; 
    background-color: #5d964a;
}

#inner1 {
    margin-top: 5px;
}

#inner2 {
    margin-top: 75px;
}

#inner3 {
    margin-top: 145px;
}

#inner4 {
    margin-top: 215px;
}

#inner5 {
    margin-top: 285px;
}

/*  This is the content area. Will have the content of the site.
    I would like this to contain all the content with no extra space
    at the bottom for large content areas, such as the about page
    or the shop page. But I don't mind it having some extra space
    at the bottom for the low content pages, like contact.
*/

#content {
    width: 700px;
    height: 680px;
    float: right;
    background-color: #965d4a;
    margin: 5px 130px 5px 0px;
    padding: 10px 10px 10px 10px;
}

/*  This is the copyright section. I want this at the bottom of every
    page. Small type, centered.
*/

#copyright {
    width: 879px;
    height: 50px;
    background-color: #965d4a;
    clear: both;
    font-size: .7em;
    text-align: center;
    margin-left: 130px;
    margin-right: 130px;
}

我希望我的格式正确，你可以看到我的问题所在。我认为它应该是我在.inner类和#navBar ID中缺失的东西。

感谢您的帮助。

Answer 1

您需要调整标题的高度，请参阅小提琴https://jsfiddle.net/sxh0n7d1/35/

如果您希望它更加多样化，则需要使用javscript。

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: white;
    background: #95954a;
} 

div {
    border-radius: 5px;

}
/* This is the header ID. I would like a static pic to go here,
    centered, and stuck at the top. Right now I just have a block header
    as a place holder. 
*/
#header {
    height:180px;
    width: 100%;
    background-color: #965d4a;
    background: url("images/logo4.jpg") no-repeat center top;
}

/*  This is the navbar, which will contain the navigation buttons.
    I want it to be long enough to contain all the buttons and
    have a bit of empty space on the bottom.
*/

#navBar {
    height: 680px;
    width: 13%;
    background-color: #965d4a;
    position: absolute;
    margin: 5px 0px 0px 130px;
    float: left;
}
/*  This is the CSS for the "buttons" in the nav bar.
    I want them to stay on the page when the user scrolls.
    I have separated the common elements into the .inner class
    and put the unique elements into the IDs.
*/

.inner {
    height: 50px;
    width: 12%;
    position: fixed;
    margin-left: 6px;
    padding-top: 10px;
    text-align: center;
    font-size: 2em; 
    background-color: #5d964a;
}

#inner1 {
    margin-top: 5px;
}

#inner2 {
    margin-top: 75px;
}

#inner3 {
    margin-top: 145px;
}

#inner4 {
    margin-top: 215px;
}

#inner5 {
    margin-top: 285px;
}

/*  This is the content area. Will have the content of the site.
    I would like this to contain all the content with no extra space
    at the bottom for large content areas, such as the about page
    or the shop page. But I don't mind it having some extra space
    at the bottom for the low content pages, like contact.
*/

#content {
    width: 700px;
    height: 680px;
    float: right;
    background-color: #965d4a;
    margin: 5px 130px 5px 0px;
    padding: 10px 10px 10px 10px;
}

/*  This is the copyright section. I want this at the bottom of every
    page. Small type, centered.
*/

#copyright {
    width: 879px;
    height: 50px;
    background-color: #965d4a;
    clear: both;
    font-size: .7em;
    text-align: center;
    margin-left: 130px;
    margin-right: 130px;
}

滚动菜单不会保留在<div>中

1 个答案: