Question

我正在使用JQuery将文本文件的内容加载到div中，但是当内容超出div时，不会出现滚动条。

HTML：

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <title></title> 
    <link rel="stylesheet" type="text/css" href="CSS/common.css">
    <script src="JS/common.js"></script>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
  </head>
  <body>
    <nav>
      <ul id="tabs">
        <li><a href="#" id="tab1" name="#tabContent1" class="activeTab">Home</a></li>
        <li><a href="#" id="tab2" name="#tabContent2">History</a></li>
        <li><a href="#" id="tab3" name="#tabContent3">The Circuit</a></li>
        <li><a href="#" id="tab4" name="#tabContent4">Gallery</a></li> 
        <li><a href="#" id="tab5" name="#tabContent5">Further Reading</a></li>    
      </ul>
    </nav>
    <div id="content">
      <div id="tabContent1"></div>
      <div id="tabContent2"></div>
      <div id="tabContent3"></div>
      <div id="tabContent4"></div>
      <div id="tabContent5"></div>
    </div>
  </body>
</html>

CSS：

body {
  background-color: #EEEEEE;
  font-family: Arial,Helvetica;
  font-size: small;
  height: 100%;
  margin: 100px auto 0;
  width: 100%;
}

#tabs {
  list-style: none outside none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  top: -98px;
  width: 100%;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;

}
#tabs a {
  border-bottom: 30px solid #3D3D3D;
  border-right: 30px solid transparent;
  color: #FFFFFF;
  float: left;
  height: 0;
  line-height: 30px;
  opacity: 0.3;
  padding: 0 40px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}

#tabs a:hover {
  border-bottom-color: #2AC7E1;
  opacity: 1;
}

#content {
  background: none repeat scroll 0 0 #FFFFFF;
  border-top: 2px solid #3D3D3D;
  height: 100%;
  padding: 2em;
  position: fixed;
  top: 30px;
  width: 98%;
  overflow: auto;
}

.activeTab {
  border-bottom-color: #3D3D3D !important;
  opacity: 1 !important;
}

.img {
}

JQuery的：

$('a[name="#tabContent2"]').click(function () {
    $("#tab1").removeClass('activeTab');
    $("#tab3").removeClass('activeTab');
    $("#tab4").removeClass('activeTab');
    $("#tab5").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent2").load("external/test2.txt");
    $("#tabContent2").show();
    $("#tabContent1").hide();
    $("#tabContent3").hide();
    $("#tabContent4").hide();
    $("#tabContent5").hide();
  });

如何显示滚动条？

Answer 1

#tabs {
  overflow: scroll;
}

overflow控制内容的隐藏方式。如果设置为hidden，它将被隐藏，没有滚动条。您希望scroll添加适当的滚动条。

Answer 2

溢出是可见的，但只是填充溢出：

#content {
  background: none repeat scroll 0 0 #FFFFFF;
  border-top: 2px solid #3D3D3D;
  height: 100%;
  padding: 2em 0 0 2em; /*<--change to this*/
  position: fixed;
  top: 30px;
  width: 98%;
  overflow: auto;
}

Answer 3

尝试使用着名的micro clearfix而不是overflow: auto;

/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
        content: " ";
        display: table;
}

.group:after,
.group:after {
    clear: both;
}

.group,
.group {
    *zoom: 1;
}

对于你的jQuery来说，这可以更短，并且可论证，更具可读性：

$('a[name="#tabContent2"]').click(function () {
    $(this).parent().parent().find("a").removeClass("activeTab");
    $(this).addClass('activeTab');

    $("#content > div").hide();
    $("#tabContent2").load("external/test2.txt");
    $("#tabContent2").show();
});

内容扩展超过div但没有滚动条

3 个答案: