div滚动条和浏览器滚动条冲突

【问题标题】：Conflict between div scrollbar and browser scrollbardiv滚动条和浏览器滚动条冲突
【发布时间】：2017-07-07 11:18:26
【问题描述】：

我有一个 div，我想在其上附加一个滚动条以保持菜单固定（此处为 Tab1）。

BODY
{
	font-size:0.8em;
    MARGIN: 0px 0px 0px 10px;
	COLOR: #000; 
    FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #ffffff;
	background: url(null) fixed #ffffff; 
}

H1
{
    MARGIN-TOP: 20px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 16px;
    MARGIN-BOTTOM: 10px;
	COLOR: #A1006B;
    TEXT-ALIGN: left;
    FONT-VARIANT: normal
}

#tabs-1 {
font-size: 14px;}
.ui-widget-header{
background:#ffff;
}

#tabs-2 {
overflow-y:scroll;
height:100%;
}
<title>Test</title>	

<link rel="stylesheet" type="text/css" href="../style/test.css" />
 
 <div id="tabs-1">
<ul>
<li><a href="#tabs-2">Tab 1</a></li>
</ul>

<div id="tabs-2">

 <h1>Test</h1>
<p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>




</div>

这是 div 滚动条的 CSS：

#tabs-2 { overflow-y:scroll; height:100%; }

当我使用固定高度值（如 400 像素）时，它可以工作，但我有很多页面具有相同的 div 但高度不同，因此该值不适用于每个 div。

我想摆脱浏览器滚动条，只使用div scrollbar。

有什么方法可以让滚动条动态适应任何div 高度？

【问题讨论】：

标签： html css height scrollbar


【解决方案1】：

改css就能解决问题，

#tabs-2 {
  overflow-y:scroll;
  height:100%; 
  width:100%; **Added
  position:absolute; **Added
}
BODY {
  font-size:0.8em;
  MARGIN: 0px 0px 0px 10px;
  COLOR: #000; 
  FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  BACKGROUND-COLOR: #ffffff;
  background: url(null) fixed #ffffff; 
  overflow:hidden;
}

希望有所帮助，

【讨论】：

  • 感谢您的回复！它有效，我可以使用固定面板滚动 div，但它非常小：pasteboard.co/GzPynJa.png 也许我有冲突。
  • 看到这个工作example。这可能是另一个问题，但这有效.. @KilianJacquemin
【解决方案2】：

我的意思是这样说：

body{
   font-size:0.8em;
   margin: 0px 0px 0px 10px;
   padding: 0px;
   color: #000; 
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   background-color: #ffffff;
   background: url(null) fixed #ffffff;
 }

h1{
  font-weight: bold;
  margin: 0px;
  font-size: 16px;
  color: #a1006b;
  text-align: left;
  font-variant: normal;
}

#tabs-1 {
  position: fixed;
  z-index:1;
  background-color: #fff;
  width: 100%;
}

.ui-widget-header{
  background:#ffffff;
}

#tabs-2 {
  position: relative;
  top: 60px;
}
<html>
<head>
<title>Test</title>
</head>
<body>

      <div id="tabs-1">
     <ul>
        <li><a href="#tabs-2">Tab 1</a></li>
     </ul>
     </div>

     <div id="tabs-2">
     <h1>Test</h1>
     <p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
     <ul>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
     </ul></p>

     <h1>Test</h1>
     <p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
     <ul>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
    </ul></p>

    <h1>Test</h1>
    <p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
    <ul>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       </ul></p>

       <h1>Test</h1>
       <p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
       <ul>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
      </ul></p>

      <h1>Test</h1>
      <p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
      <ul>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
     </ul></p>

     <h1>Test</h1>
     <p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
     <ul>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
     </ul></p>

     <h1>Test</h1>
     <p class="Comment">	<div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
     <ul>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
    </ul></p>
    </div>

</body>
</html>

【讨论】：

  • 太好了，谢谢！奇怪的是，我在我的网站上实现了你的代码，但它没有显示滚动条......我可能有冲突。
猜你喜欢
  • 2010-09-06
  • 2019-03-10
  • 2018-08-31
  • 1970-01-01
  • 2012-03-14
  • 2010-11-15
  • 2015-08-11
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode