如何在窗口大小調整時在內容div中添加水平滾動條？

我正在構建一個html模板。我的要求是，當用戶調整窗口大小時，他將只在「部分」div下方的滾動條而不是整個窗口。我正在添加overflow: auto屬性，但它不能按預期工作。任何建議都會有幫助。如何在窗口大小調整時在內容div中添加水平滾動條？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 

<style> 
html, body {height:100%; margin: 0; padding: 0; } 

    body { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    background-color: #F2F2F2; 
} 

header { 
    width: 100%; 
    position: absolute; 
    min-width: 1000px; 
    top: -5px; 
    margin-top:-8px; 
    color: white; 
    height: 85px !important; 
    padding-top: 8px; 
    text-align: center; 
    z-index:100; 
    border-bottom: 2px solid #FFF; 
} 

.headtable{ 
    background-color: #3A9DCA; 
    z-index:100;!important; 
} 

.linktable{ 
    margin-right:30px; 
} 

.linktable td {  
    color: #fff; 
    margin: 5px; 
    font-size: 14px; 
    font-family: Calibri, Verdana, Georgia; 
} 

.linktable td a {  
    color: #000; 
    text-decoration: underline; 
    font-size: 15px; 
    } 

    .linktable td a:hover{ 
    text-decoration: none; 
    color: #FFF;  
    cursor: pointer; 
    } 

    .menunav{ 
    background-color: #333333; 
    } 

.topnav { 
    overflow: hidden; 
    font-family: Calibri, Verdana, Georgia; 
} 

.topnav a { 
    float: left; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 6px 16px 0px 16px; 
    height: 30px !important; 
    text-decoration: none; 
    font-size: 17px; 
} 

.topnav a:hover { 
    background-color: #dddddd; 
    color: black; 
    cursor:pointer; 
} 

.topnav a.active { 
    background-color: #58853E; 
    color: white; 
} 

.main-container{ 
    overflow: auto; 
    float:left; 
    width: 100%; 
    position:relative; 
    min-height: 100%;  
    padding: 120px 0 30px 0; /* Header height and footer height */ 
    margin:0 auto 0 auto; /* Center content */ 
} 

nav { 
    background-color: #E7E6ED; 
    left:85%; 
    height:650px; 
    width:210px; 
    min-width:215px; 
    max-width:225px; 
    color: #000; 
    top:0px; 
    padding-top:120px; 
    padding-left:15px; 
    position:fixed; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -o-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box;  
} 

section { 
    width: 100%; 
    height: 100%;  
    margin-right: 180px;  
    position:absolute;  
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -o-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
} 

footer { 
    background-color: #3A9DCA; 
    color:white; 
    clear:both; 
    padding-top:5px; 
    text-align:center;   
    width: 100%; 
    position: fixed; 
    bottom: 0; 
    height: 20px; 
    z-index:100!important;  
} 

</style> 
</head> 
<body> 

<header>  
    <table cellpadding="3" border="0" align="center" class="headtable" width="100%"> 
    <tr> 
     <td style="padding-left:30px;" width="12%" align="left"> 
      logo 
     </td> 
     <td width="50%" align="left"> 
      <h2>Proj Name</h2> 
     </td>     
     <td align="right" width="37%"> 
      <table border="0" cellpadding="0" class="linktable"> 
       <tr> 
        <td align="left" width="170px"> 
         Start your activity 
        </td> 
        <td align="right" width="65px"> 
         <a onClick="javascript:void(0)"> 
          Sign In 
         </a>        
        </td> 
       </tr> 
       <tr> 
        <td align="left"> 
         Can't remember password? 
        </td> 
        <td align="right"> 
         <a onClick="javascript:void(0)"> 
          Click Here 
         </a>        
        </td> 
       </tr> 
       <tr> 
        <td align="left"> 
         Don't have an account? 
        </td> 
        <td align="right"> 
         <a onClick="javascript:void(0)"> 
          Sign Up 
         </a>        
        </td> 
       </tr> 
      </table>   
     </td>   
    </tr> 
    </table> 
    <table class="menunav" width="100%"> 
     <tr> 
      <td> 
       <div class="topnav"> 
        <a href="index.jsp" class="active">Search </a>      
        <a>Book </a> 
        <a>Upload </a> 
        <a>View History</a> 
        <a>Contact </a> 
       </div> 
      <td> 
     </tr> 
    </table> 
</header> 

<!-- BEGIN #main --> 
<div class="main-container">  
    <section>    
     main content # here scroll bar will appear horizontally 
    </section> 
    <nav> 
     advertise section should remain fixed 
    </nav> 
</div> 
<footer> Copyright © 2017 </footer> 
</body> 
</html>

請參閱JSfiddle

來源

2017-09-14 Tuhin Subhra Dey