html - 如何在左,右菜单和导航栏保持静止时使主要部分滚动?
问题描述
<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>
我一直在学习 CSS 和 HTML,但我是个新手,我知道你们中的一些人会笑。但是,当左右菜单和导航栏保持不动时,如何使主要部分滚动?我在主要部分添加了一些文本,但是当我滚动左侧菜单时,导航栏和主滚动在一起
解决方案
如果您将#main 更改为以下,则会出现一个滚动条。这就是你的目的吗?这些更改使您的高度成为静态值,然后添加滚动溢出。对于您的特定示例,我还必须调整宽度。
#main{
background-color: yellowgreen;
width: 450px;
position: relative;
margin-top: 10px;
margin-left: 335px;
padding: 16px;
height:500px;
overflow:scroll;
}
推荐阅读
- ios - 在使用应用内购买创建 ios 应用时,我有一个查询
- javascript - 为什么 IE 在页面加载时触发 $window.onblur 和 $window.onfocus ?
- javascript - 为什么我的承诺在循环中存在时间问题,我该如何解决?
- ssl - 我可以为多个 kafka 生产者/消费者使用相同的密钥库吗
- sql-server - 如何杀死在服务器上运行的断开连接的会话?
- node.js - 如何将 nodejs-mongodb 应用程序的 get json 响应转换为表
- c++ - 使用 C++ 在 Qt Creator 中创建 QLabel 的子类
- django - Django-Channels 2 Apache CentOS 7 部署
- android - 在完成所有验证之前如何防止导航?
- java - 如何使用休眠在mysql中将LocalDateTime初始化为TIMESTAMP?