Question

我正在构建一个html模板。我的要求是，当用户调整窗口大小时，他将在“＆＃39;部分”下方获得一个滚动条。而不是整个窗口。我正在添加overflow: auto属性，但它没有按预期工作。任何建议都会有所帮助。

<!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

中的链接

Answer 1

您可以使用class="responsive-table" 使用物化这里的文档 - ＆gt; http://materializecss.com/table.html

Answer 2

尝试响应表，如果需要针对特定屏幕尺寸执行此操作，还可以放置媒体查询 - https://www.w3schools.com/bootstrap/bootstrap_tables.asp

Answer 3

使用媒体查询并制定规则，然后将此行添加到您的代码中 .your_div {overflow：x;} 您可以在此处详细了解媒体查询： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

当窗口调整大小时，如何在内容div中添加水平滚动条？

3 个答案: