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

时间：2017-07-07 11:18:26

标签： html css height scrollbar

我有一个div，我想附加一个滚动条来保持菜单的固定（Tab1在这里）。

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这是我的div滚动条的CSS：

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

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

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

有没有办法让滚动条动态适应任何div scrollbar高度？

2 个答案:

答案 0 :(得分：0)

更改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;
}

希望有所帮助，

答案 1 :(得分：0)

我的意思是这样说：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题