內容擴展超出div但沒有滾動條

我正在使用JQuery將文本文件的內容加載到一個div中，但是當內容超出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(); 
    });

我怎樣才能獲得滾動條出現？

來源

2013-02-12 Colin747

你可以讓一個JSFiddle你沒有提供編輯您的JavaScript文檔 – iConnor 2013-02-12 18:24:16

@ j08691添加JQuery的問題。 – Colin747 2013-02-12 18:25:22

您是否嘗試在'＃content' div上更改'overflow：auto;'來溢出：滾動;'' – j08691 2013-02-12 18:30:24

溢出是可見，但它只是填充溢出：

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

來源

2013-02-12 18:34:09 Jai

工作正常但是在滾動條和屏幕之間的右側有一個相當沉重的酒吧。 – Colin747 2013-02-12 18:35:25

修復了這是一個錯字...再次。 – Colin747 2013-02-12 18:36:26

#tabs { 
    overflow: scroll; 
}

overflow控制如何隱藏內容。如果設置爲hidden，它將被隱藏，沒有滾動條。您希望scroll添加適當的滾動條。

來源

2013-02-12 18:25:54

我還沒有收到滾動條。 – Colin747 2013-02-12 18:27:41

您也可以使用{overflow-y：scroll}來避免底部不必要的死亡滾動條。 – isherwood 2013-02-12 18:28:01

@isherwood'#tabs { overflow：scroll; }'不起作用。 – Colin747 2013-02-12 18:29:06

嘗試使用著名微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(); 
});

來源

2013-02-12 18:27:07

內容擴展超出div但沒有滾動條

回答

相關問題