固定的侧边栏，可滚动的内容 [英] Fixed sidebar, scrollable content
问题描述
我正在尝试创建一个具有固定侧边栏和可滚动内容的网页.如果没有标题div，它确实可以工作.如果我滚动页面，则有一些空白空间，该空间以前是标题(我用红色标记了它).我希望在滚动标题div后，边栏能够覆盖空白区域.
I'm trying to create a webpage that will have a fixed sidebar and scrollable content. It does work if I don't have a header div. If I scroll page I have some empty space that previously was a header (i marked it with red color). I'd like my sidebar to cover the empty space after I scroll through header div.
这是我的HTML代码-我该如何解决?
Here's my HTML Code - how can I fix this?
<!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;
}
推荐答案
您必须将导航div放在最外面的部分，即正文中(而不是其他任何div中).
You have to place your navigation div in outermost part i.e. in body(not in any other div).
我已经对此进行了测试，现在可以正常工作了.
I have tested this and its now working fine.
您的新代码应为
<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:-
And your modified 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.
In css I have changed the navigation's height to 100% and its z-index to 1.
此外，您也没有关闭"page"类的div标签.
Also you didn't close the div tag with class "page".
参考:-w3 css sidenav
Reference:- w3 css sidenav
这篇关于固定的侧边栏，可滚动的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
