內容擴展到div之外，但沒有滾動條

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 個解決方案

解決方案1
3 2013-02-12 18:25:54

解決方案2
1 已采納 2013-02-12 18:34:09

解決方案3
0 2013-02-12 18:27:07

內容擴展到div之外，但沒有滾動條

問題描述

3 個解決方案

解決方案1 3 2013-02-12 18:25:54

解決方案2 1 已采納 2013-02-12 18:34:09

解決方案3 0 2013-02-12 18:27:07

解決方案1
3 2013-02-12 18:25:54

解決方案2
1 已采納 2013-02-12 18:34:09

解決方案3
0 2013-02-12 18:27:07