html - 调整大小时，我的水平滚动条不起作用

Question

当我调整浏览器窗口大小时，我的水平滚动条不起作用。 Heres my fiddle .谁能帮我解决这个问题，这是我尝试建立的第一个网站。

{                               
    position:absolute;
     background-color:black;
     height: 30%;
     top:0;
     right: -6.8%;
     width:212px;
    height:200px;         
}


.zacspicture2
   {
    position:relative;
     background-color:black;
     height: 30%;
     right:10%;
     bottom:10%;  
    top:0;
   width:1180px;
    height:200px;
            
}

.zacspicture3
   {
    position:relative;
     background-color:black;
     height: -1%;
     right: -7%;
     bottom:10%;  
    top:0;
    width:200px;
    height:430px;
            
}



.topnav {
    background-color: #333;
    overflow: hidden;
    width:114.1%;
    left:-13%;  
    top:98%;
    position:absolute;
   padding-left: 81px;
   
  }

    /* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
        

.wrapper
{
  position: absolute;
    left:95%;
    top:-1%;
  background-color:black;   
   margin-left: 0;
}

.wrapper2
{
  position: absolute;
  right: 38%;
 
}

       .centerbottompage
        {
        position: absolute;
         background-color: #D3D3D3;
         height:200%;
         width: 70%;
         left:8%;
         top:121.1%;
         padding-right: 30px;
         padding-left: 30px;
         overflow: scroll;    
          padding-bottom:25px;            
         }

       

       .leftbottompage
       {
       position: absolute;
         
         width: 17%;
         height:200%;
         left:-10%;
         top:121.1%; 
          padding-bottom:25px;
     
       }

        .rightbottompage
       {
       position: absolute;
         background-color: #C0C0C0;
         width: 25%;
         height:200%;
         right:-8%;
         top:121.1%; 
        border-left-style: solid;
        overflow: scroll;  
         padding-bottom:25px;
       }

     .breakWord
    {
        width:40em;
     overflow-wrap: break-word;
    }


    table 
  { 
position:absolute; 
bottom:0%; 
width: 100%;
border: double 6px #000000;  

  } 


  table.updatesTable

  {
  border: double 6px #000000;  
  position:absolute; 
  top:15%; 
  word-wrap:break-word; 
      border-collapse: collapse;

   }

    table.updatesTable, th, td
   {

     border: 1px solid black;
   }



   td.updatesTable
   {
    width: 5em;
    word-wrap:break-word;

   }

    th.updatesTable
   {
   
   }

   
    html,
    body {
    width: 98Hi, 9px;
    margin: 0 auto;
    min-height: 100%;
    min-width: 100%;
    }


    }

<div class="wrapper">
   
    <div class="wrapper2">
    <div class="zacspicture">
    <img class="zacspicture" src="zacs.website.photo.jpg" alt="Mountain View"></div>
    <div>
    <img class="zacspicture2" src="binary-2302728_1280.jpg" alt="Mountain View" ></div>
    <div>
 
    <div class="topnav" id="header">
    <a href="index.php">Home</a>
    <a href="resume.php">Resume</a>
    <a href="contact.php">Contact</a>
    <a href="projects.php">Projects</a>

    </div>

<div class="centerbottompage">
  <h1>Biography</h1>      
    <br>
    <p Class="breakWord">



 </div>
<div class="leftbottompage">
 <img class="zacspicture3" src="programming-898961_1920.jpg" alt="Mountain View"></div>
 </div>
<div class="rightbottompage">
 <center> <h1> Updates </h1> </center>
   
 
 </div>

 
     </div>

Answer 1

我最终通过将滚动条设置为“ltr”来更改滚动条方向来修复它。谢谢大家帮我解决问题