Question

我制作了一个侧边栏，其位置固定在屏幕的左侧。然后问题出现的地方是“第一个”问题。当我尝试添加上下文的第二部分时，上下文部分很好，它基本上位于第一部分的顶部，而不是在它下面。我尝试了不同的定位，但它始终位于屏幕上方或屏幕左侧而忽略侧边栏。所以我的问题是，如何让第二部分继续在第一部分和第三部分继续，然后当然按照相同的方式。提前谢谢。

＆＃13;

body{

    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}

#wrapper {
    width: 100%;
    height: 100%;
}

#sidebar{
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#nav{
    color: #DADADA;
    display: block;
    max-width: 100%;
}

#nav ul {
    padding-left: 0;
}

#nav li{
    list-style-type: none;
    margin: 0;
    padding: 0.75em 0 0.75em 0;
    text-align: center;
    max-width: 100%;
}

#nav li:hover {
    background:#333;
}

#nav li a {
    display: block;
    padding: 0.5em 0;
}

.link{
    text-align: right;
    margin-right: 25%;
    letter-spacing: 1px;
}

#welcometext{
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2em;
}

#searchbar{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1em 0.5em 1em;
    text-align: right;
}

#searchbar input{
    max-width: 95%;

}

#sectionone {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
}

#containerone {
    margin-top: 0;
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-bottom: 2px solid #DADADA;
    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}

#header{
    margin: 6em 0 6em 0;
}

#logo h1 {
    color: #ed786a;
    text-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
    letter-spacing: 13px;
}

#logo p {
    margin-top: -0.6em;
    color: #888888;
    letter-spacing: 4px;
    font-size: 0.85em;
}

#sectiontwo{
    float: ;
    width: 80%;
    top: 0;
    right: 0;
}

#containertwo{

    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
    <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
            <h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder="...Search Book Title"/>
                </form>
            </div>
            <ul>
                <li>
                    <a class="link">
                        Home
                    </a>
                </li>
                <li>
                    <a class="link">
                        Categories
                    </a>
                </li>
                <li>
                    <a class="link">
                        Bestsellers
                    </a>
                </li>
                <li>
                    <a class="link">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="sectionone">
        <div id="containerone">
            <div id="header">
                <div id="logo">
                    <h1>LAKESIDE BOOKS</h1>
                    <p>KERRYS LOCAL BOOKSTORE</p>
                </div>
            </div>
        </div>
    </div>

    <div id="sectiontwo">
        <div id="containertwo">
            <h2>Best Selling Books Right Now</h2>
        </div>
    </div>

</div>
</body>
</html>

＆＃13;

问题图片 - http://i.imgur.com/g9ur5eS.png

Answer 1

根据我的评论的答案，您不希望sectionone拥有position:fixed;。我已将/* ### */放在我添加的CSS旁边，并注释掉了需要删除的任何内容。

基本上我已经为html / body添加了一些重置规则，然后向wrapper添加了20％的左边距。其他元素自然地紧挨着它。

html, body { /* ### */
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
    width: 100%;
    height: 100%;
    margin:0 0 0 20%; /* ### */
}
#sidebar {
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
#nav {
    color: #DADADA;
    display: block;
    max-width: 100%;
}
#nav ul {
    padding-left: 0;
}
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0.75em 0 0.75em 0;
    text-align: center;
    max-width: 100%;
}
#nav li:hover {
    background:#333;
}
#nav li a {
    display: block;
    padding: 0.5em 0;
}
.link {
    text-align: right;
    margin-right: 25%;
    letter-spacing: 1px;
}
#welcometext {
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2em;
}
#searchbar {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1em 0.5em 1em;
    text-align: right;
}
#searchbar input {
    max-width: 95%;
}
#sectionone {
    /*position: fixed;*/
    top: 0;
    right: 0;
    width: 80%;
}
#containerone {
    margin-top: 0;
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-bottom: 2px solid #DADADA;
    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
    margin: 6em 0 6em 0;
}
#logo h1 {
    color: #ed786a;
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 13px;
}
#logo p {
    margin-top: -0.6em;
    color: #888888;
    letter-spacing: 4px;
    font-size: 0.85em;
}
#sectiontwo {
    float:;
    width: 80%;
    top: 0;
    right: 0;
}
#containertwo {
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
             <h3 id="welcometext">Welcome To<br />Lakeside Books</h3>

            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder="...Search Book Title" />
                </form>
            </div>
            <ul>
                <li> <a class="link">
                        Home
                    </a>

                </li>
                <li> <a class="link">
                        Categories
                    </a>

                </li>
                <li> <a class="link">
                        Bestsellers
                    </a>

                </li>
                <li> <a class="link">
                        Contact
                    </a>

                </li>
            </ul>
        </nav>
    </div>
    <div id="sectionone">
        <div id="containerone">
            <div id="header">
                <div id="logo">
                     <h1>LAKESIDE BOOKS</h1>

                    <p>KERRYS LOCAL BOOKSTORE</p>
                </div>
            </div>
        </div>
    </div>
    <div id="sectiontwo">
        <div id="containertwo">
             <h2>Best Selling Books Right Now</h2>

        </div>
    </div>
</div>

Answer 2

如果你在包装标签中包含<div id="sectionone">和<div id="sectiontwo">并将导航宽度作为填充应用到此包装器，那么从那两个div中删除固定位置你应该得到你正在寻找的东西对

http://jsfiddle.net/vf00h0zq/

body{

    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}

#wrapper {
    width: 100%;
    height: 100%;
}

#sidebar{
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#nav{
    color: #DADADA;
    display: block;
    max-width: 100%;
}

#nav ul {
    padding-left: 0;
}

#nav li{
    list-style-type: none;
    margin: 0;
    padding: 0.75em 0 0.75em 0;
    text-align: center;
    max-width: 100%;
}

#nav li:hover {
    background:#333;
}

#nav li a {
    display: block;
    padding: 0.5em 0;
}

.link{
    text-align: right;
    margin-right: 25%;
    letter-spacing: 1px;
}

#welcometext{
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2em;
}

#searchbar{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1em 0.5em 1em;
    text-align: right;
}

#searchbar input{
    max-width: 95%;

}

.content {
    padding-left: 20%;
}


#containerone {
    margin-top: 0;
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-bottom: 2px solid #DADADA;
    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}

#header{
    margin: 6em 0 6em 0;
}

#logo h1 {
    color: #ed786a;
    text-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
    letter-spacing: 13px;
}

#logo p {
    margin-top: -0.6em;
    color: #888888;
    letter-spacing: 4px;
    font-size: 0.85em;
}

#containertwo{

    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
             <h3 id="welcometext">Welcome To<br>Lakeside Books</h3>

            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder="...Search Book Title" />
                </form>
            </div>
            <ul>
                <li> <a class="link">
                        Home
                    </a>

                </li>
                <li> <a class="link">
                        Categories
                    </a>

                </li>
                <li> <a class="link">
                        Bestsellers
                    </a>

                </li>
                <li> <a class="link">
                        Contact
                    </a>

                </li>
            </ul>
        </nav>
    </div>
   <section class="content">
    <div id="sectionone">
        <div id="containerone">
            <div id="header">
                <div id="logo">
                     <h1>LAKESIDE BOOKS</h1>

                    <p>KERRYS LOCAL BOOKSTORE</p>
                </div>
            </div>
        </div>
    </div>
    <div id="sectiontwo">
        <div id="containertwo">
             <h2>Best Selling Books Right Now</h2>

        </div>
    </div>
        </section>
</div>

DIV部分相互重叠

2 个答案: