div 滚动条和浏览器滚动条之间的冲突

Question

我有一个 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>

这是我的 CSS div 滚动条：

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

当我使用固定高度值（如 400px）时，它可以工作，但我有很多页面具有相同的 div 但不同的高度，所以这个值不适用于每个 div.

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

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

Answer 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;
}

希望有所帮助，

Answer 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>

div 滚动条和浏览器滚动条之间的冲突

Conflict between div scrollbar and browser scrollbar

html

css

height

scrollbar