固定侧边栏，可滚动内容答案

【问题标题】：Fixed sidebar, scrollable content固定侧边栏，可滚动内容
【发布时间】：2016-03-21 03:31:48
【问题描述】：

我正在尝试创建一个具有固定侧边栏和可滚动内容的网页。如果我没有标题 div，它确实有效。如果我滚动页面，我有一些以前是标题的空白空间（我用红色标记它）。滚动浏览标题 div 后，我希望侧边栏覆盖空白区域。

这是我的 HTML 代码 - 我该如何解决这个问题？

<!doctype html>

<head>
    <link rel="stylesheet" href="style.css"type=" text/css"/>
</head>

<body>
    <div id="page">

        <div id="header">   
        </div>

        <div id="navigation">
            <ul>
                <li><a href="#home">home</a></li>
                <li><a href="#news">news</a></li>
                <li><a href="#contact">contact</a></li>
                <li><a href="#about">about</a></li>
            </ul>
        </div>

        <div id="content">
            <div id="abcd">
        </div>
    </div>
</body>

CSS

#page
{
    position:relative;
    width:100%;
    height:3000px;

    background-color:yellow;
}

#header
{
    background-color: blue;
    width:100%;
    height:150px;
}

#navigation
{

    background-color: red;
    width:10%;  
    height:3000px;
    float:left;

}

#content
{
    float:left;
    background-color: green;
    width:90%;  
    overflow: auto;
    height:1000px;
}

body 
{
    margin: 0;
}

ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a 
{
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

【问题讨论】：

标签： html css

【解决方案1】：

您必须将导航 div 放在最外层，即在 body 中（而不是在任何其他 div 中）。

我已经对此进行了测试，现在可以正常工作了。

你的新代码应该是

<html>
<head>
    <link rel="stylesheet" href="style.css" type=" text/css" />
</head>

<body>
    <div id="navigation">
        <ul>
            <li><a href="#home">home</a></li>
            <li><a href="#news">news</a></li>
            <li><a href="#contact">contact</a></li>
            <li><a href="#about">about</a></li>
        </ul>
    </div>

    <div id="page">

        <div id="header">

        </div>
        <div id="content">
            <div id="abcd">

            </div>

        </div>

    </div>
</body>
</html>

还有你修改后的css：-

#page {
    position: relative;
    width: 100%;
    height: 3000px;
    background-color: yellow;
}

#header {
    background-color: blue;
    width: 100%;
    height: 150px;
    display: block;
}

#navigation
{
    background-color: red;
    width:10%;
    height:100%;
    float:left;
    position: absolute;
    z-index:1;
}

#content {
    float: left;
    background-color: green;
    width: 90%;
    overflow: auto;
    height: 1000px;
}

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

在 css 中，我将导航的高度更改为 100%，并将其 z-index 更改为 1。

你也没有关闭带有“page”类的 div 标签。

参考：- w3 css sidenav

【讨论】：

感谢您的回答！我认为我的问题不太准确。当我滚动槽标题 div 时，我希望我的导航栏覆盖页面的整个高度（我也希望这些列表项位于页面顶部）。
我已经更新了我的答案并插入了工作代码。

【解决方案2】：

请试试这个：

#navigation {
    background-color: red;
    width: 10%;
    height: 3000px;
    float: left;
    position: absolute;
    z-index: 99999;
    left: 0;
    top: 0;
}

【讨论】：

感谢您的回答！不幸的是它覆盖了我的导航栏，我希望它只有在我看不到标题时才能覆盖整个页面。