Html 如何在左、右菜单'；s和导航栏保持静止？ 测试页面 身体{ 边际：0px； 填充：0px； } #顶栏{ 背景颜色：蓝色； 宽度：100%； 高度：35px； 保证金：0px自动； } #标志{ 宽度：100px； 左边距：100px； 浮动：左； } #搜索栏{ 边缘顶部：5px； 左边距：10px； 高度：25px； 宽度：400px； 浮动：左； 边界半径：2px； 边框：1px#000实心； 填充物：5px 5px 5px； 位置：绝对位置； z指数：5； } #左菜单{ 浮动：左； 宽度：300px； 背景颜色：绿色； 高度：500px； 左边距：25px； 边缘顶部：10px； } #主要{ 背景颜色：黄绿色； 身高：100%； 宽度：500px； 位置：相对位置； 边缘顶部：10px； 左边距：335px； 填充：16px； } h1{ 保证金：0px } p{ 保证金：0px } 固定顶菜单 滚动此页面以查看效果 滚动时，导航栏将停留在页面顶部
一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 固定顶菜单 滚动此页面以查看效果 滚动时，导航栏将停留在页面顶部 我一直在学习CSS和HTML，但我完全是个新手，我知道你们中的一些人会笑的。但是，当左、右菜单和导航栏保持静止时，如何使主部分滚动？我在主部分添加了一些文本，但当我滚动左侧菜单时，导航栏和主滚动栏一起出现如果您将#main更改为下方，则会出现滚动栏。这就是你想要的吗？这些更改使您的高度成为静态值，然后添加滚动溢出。我必须调整宽度，以及为您的具体例子Html 如何在左、右菜单'；s和导航栏保持静止？ 测试页面 身体{ 边际：0px； 填充：0px； } #顶栏{ 背景颜色：蓝色； 宽度：100%； 高度：35px； 保证金：0px自动； } #标志{ 宽度：100px； 左边距：100px； 浮动：左； } #搜索栏{ 边缘顶部：5px； 左边距：10px； 高度：25px； 宽度：400px； 浮动：左； 边界半径：2px； 边框：1px#000实心； 填充物：5px 5px 5px； 位置：绝对位置； z指数：5； } #左菜单{ 浮动：左； 宽度：300px； 背景颜色：绿色； 高度：500px； 左边距：25px； 边缘顶部：10px； } #主要{ 背景颜色：黄绿色； 身高：100%； 宽度：500px； 位置：相对位置； 边缘顶部：10px； 左边距：335px； 填充：16px； } h1{ 保证金：0px } p{ 保证金：0px } 固定顶菜单 滚动此页面以查看效果 滚动时，导航栏将停留在页面顶部,html,css,Html,Css,一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字一些文字 一些文字一些文字一些文字
<html>
<head>
<title>The testing page</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#topbar{
background-color: blue;
width: 100%;
height: 35px;
margin: 0px auto;
}
#logo{
width: 100px;
margin-left: 100px;
float: left;
}
#searchbar{
margin-top: 5px;
margin-left: 10px;
height: 25px;
width: 400px;
float: left;
border-radius: 2px;
border: 1px #000 solid;
padding: 5px 5px 5px 5px;
position: absolute;
z-index: 5;
}
#leftmenu{
float: left;
width: 300px;
background-color: green;
height: 500px;
margin-left: 25px;
margin-top: 10px;
}
#main{
background-color: yellowgreen;
height: 100%;
width: 500px;
position: relative;
margin-top: 10px;
margin-left: 335px;
padding: 16px;
}
h1{
margin: 0px
}
p{
margin: 0px
}
</style>
</head>
<body>
<div id="topbar">
<img id="logo" src="images/explogo.png">
<input id="searchbar" type="text" placeholder="Search">
</div>
<div id="leftmenu">
</div>
<div id="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
</div>
</body>
</html>
谢谢，这和我想要的差不多。除了我想让主屏幕像在Facebook上一样滚动通过导航栏，有什么想法吗？没关系，我想出来了
#main{
background-color: yellowgreen;
width: 450px;
position: relative;
margin-top: 10px;
margin-left: 335px;
padding: 16px;
height:500px;
overflow:scroll;
}