補充工具欄和內容：滾動問題

我正在嘗試爲主要內容構建一個帶有側邊欄和右側的網站。儘管我已經嘗試了很多方法來實現它，但它並不像我想的那樣行事。從本質上講，我希望他們兩個在滿頁div溢出時滾動。補充工具欄和內容：滾動問題

<!DOCTYPE html> 

<html lang = "en-US"> 


    <head> 

     <meta charset = "utf-8"> 
     <meta http-equiv = "X-UA-Compatible" content = "IE=edge"> 
     <meta name = "viewport" content = "width=device-width, initial-scale=1"> 

     <title>Glocal Impacts</title> 

     <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"> 
     <link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css"> 

     <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 

     <script type = "text/javascript" src = "js/jquery.js"></script> 
     <script type = "text/javascript" src = "js/bootstrap.js"></script> 
     <script type = "text/javascript" src = "js/matchHeight.js"></script> 
     <script type = "text/javascript" src = "js/app.js"></script> 

    </head> 


    <body> 



     <div class = "fullBG" 
      style = "background-image: linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)), 
         url('pic/health.jpg');"> 

      <div class = "homeSide"> 
       <ul> 
        <li><a href = "index.html">Home</a></li> 
        <li><a href = "about.html">About Glocal</a></li> 
        <li><a href = "team.html">Team</a></li> 
        <li><a href = "itinerary.html">Itinerary</a></li> 
        <li><a href = "service.html">Service Learning</a></li> 
        <li><a href = "trip.html">Upcoming Trips</a></li> 
        <li><a href = "alumni.html">Ask an Alumni</a></li> 
        <li><a href = "blog.html">Blog + Gallery</a></li> 
        <li><a href = "apply.html">Apply</a></li> 
        <li><a href = "contact.php">Contact</a></li> 
        <li><a href = "donate.html">Donate</a></li> 
       </ul> 
      </div> 


      <div class = "homeMain" style = "display: block"> 


       <div class = "content"> 

        <h1 id = "orphan">Touch an Orphan's Life</h1> 

        <p>A visit to an orphanage in Fez is an experience that our participants usually list as most memorable and one that has had the most impact on their lives. Students get to interact with mostly abandoned kids that range in age from few days to twelve years old. Participants have donated clothing and cash to help the day to day operation of the orphanage. Some of our students have even donated to the employees of the orphanage in a show of appreciation to their dedication and selflessness. Get your handkerchiefs ready, this has always been a good idea.</p> 

        <img class = "img-responsive" src = "pic/orphan.jpg"> 

        <h1 id = "school">Maisa's School Supplies</h1> 

        <p>Students and their parents have come through in a major way when it came to donating school supplies. In fact, this project is named after the mother of one our alumni, Maisa, who has been examplary in this area and has procured countless school supplies. We encourage all participants and their families to follow suit and help us collect these supplies to bring on the trip and hand them directly to a group of needy and well deserving children.</p> 

        <img class = "img-responsive" src = "pic/school.jpg"> 

        <h1 id = "clothes">Clothing Donations</h1> 

        <p>Lighten up the load in your overstuffed closet by getting rid of clothes that you have either outgrown or have no use for, and donate them to someone who needs them. Donating new, unworn or gently used clothing helps alleviate the pain of those who are in need and provides participants with an opportunity to affect change in a world plagued with sharp disparities. Pack an extra bag and get ready to donate its content directly to those who are to benefit from it. We have a close working relationship with an orphanage in the city of Fez. We will also make some impromptu stops as you travel through the Atlas Mountains to donate clothes.</p> 

        <img class = "img-responsive" src = "pic/clothes.jpg"> 

        <h1 id = "soccer">Project Soccer Ball</h1> 

        <p>Soon after you touch down in Morocco, you will realize that the sport of soccer or football, as it’s known around the world, is not just a sport. Its reconciling powers overcome all. Students are encouraged to bring in a soccer ball to donate to local kids and witness how much love and peace can come from a single soccer ball. Students who are grooming themselves for a career in diplomacy and politics tend to benefit tremendously from this experience.</p> 

        <img class = "img-responsive" src = "pic/soccer.jpg"> 

       </div> 

       <div class = "social"><ul> 
        <li><a href = "https://twitter.com/moroccoprogram" target = "_blank"><img src = "icon/twitter.png"></a></li> 
        <li><a href = "https://www.facebook.com/moroccoprogram" target = "_blank"><img src = "icon/facebook.png"></a></li> 
        <li><a href = "https://www.youtube.com/channel/UC_BIg1VK3aqpGKuFVT2UCFA" target = "_blank"><img src = "icon/youtube.png"></a></li> 
       </ul></div> 

      </div> 

     </div> 


    </body> 


</html>

正如你可以看到，有三個滾動條，而不是側邊欄和內容中的一個滾動條。這很奇怪，甚至右側似乎超過了左側。這是我的HTML和LESS。有任何想法嗎？

（PS引導網格元素不會在內容窗格中真正的工作要麼）

@import "variables.less"; 

@text:     #303031; 
@foot:     #373737; 
@line:     #93999a; 
@main:     #435573; 
@tabs:     #222c3c; 
@accent:     #b52b2c; 
@height:     590px; 

@font-face 
{ 
    font-family: Montserrat; 
    src: url("../fonts/Montserrat.woff2"); 
} 

@font-face 
{ 
    font-family: Selima; 
    src: url("../fonts/Selima.otf"); 
} 

@font-face 
{ 
    font-family: Avenir; 
    src: url("../fonts/Avenir.woff"); 
} 

@font-face 
{ 
    font-family: Proxima; 
    src: url("../fonts/Proxima.otf"); 
} 

@font-face 
{ 
    font-family: Euclid; 
    src: url("../fonts/Euclid.otf"); 
} 

@font-face 
{ 
    font-family: Besom; 
    src: url("../fonts/Besom.ttf"); 
} 

html, body 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px auto; 
    padding: 0px; 
} 


.navbar 
{ 
    font-family: Euclid; 
    font-size: 14px; 
    letter-spacing: 3px; 
    text-decoration: none; 
    margin-bottom: 0px; 

} 


.content 
{ 
    text-align: left; 
    background-color: white; 
    padding: 80px; 


    h1 
    { 
     font-family: Avenir; 
     font-size: 35px; 
     line-height: 40px; 
     color: black; 
     text-transform: none; 
     text-decoration: none; 
     letter-spacing: 1px; 
     margin-bottom: 5px; 
    } 

    ul 
    { 
     margin-bottom: 30px; 
    } 

    p 
    { 
     font-family: Proxima; 
     font-size: 16px; 
     line-height: 32px; 
     color: black; 
     font-weight: normal; 
     letter-spacing: 2px; 
     margin: 20px 0; 
     -webkit-hyphens: auto; 
     -moz-hyphens: auto; 
     -ms-hyphens: auto; 
     -o-hyphens: auto; 
     hyphens: auto; 
     text-align: justify; 
    } 

    li 
    { 
     font-family: Proxima; 
     font-size: 16px; 
     color: @text; 
     font-weight: normal; 
     letter-spacing: 2px; 
     margin: 15px 0; 
     -webkit-hyphens: auto; 
     -moz-hyphens: auto; 
     -ms-hyphens: auto; 
     -o-hyphens: auto; 
     hyphens: auto; 
    } 

    img 
    { 
     width: 100%; 
     margin: 30px 0; 
    } 

} 


.fullBG 
{ 
    background-color: #efefef; 
    background-repeat: no-repeat; 
    background-size: center center; 
    background-position: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
} 

.block 
{ 
    display: block; 
    padding: 75px 10px; 
    border: 2px solid white; 
    background: rgba(255, 255, 255, 0.2); 
    color: white; 
    text-align: center; 
    font-family: Avenir; 
    letter-spacing: 3px; 
    font-size: 25px; 

} 

.homeMain 
{ 
    display: flex; 
    min-height: 590px; 
    flex-direction: column; 
    padding-left: 250px; 
    max-height: 100%; 
    overflow-y: scroll; 
} 

.middle 
{ 
    flex: 1; 
} 

.fancy 
{ 
    font-family: Selima; 
    font-size: 80px; 
    line-height: 85px; 
    color: white; 
    text-transform: none; 
    text-decoration: none; 
    letter-spacing: 2px; 
    margin: 0px auto; 
    padding-top: 20px; 
    text-align: center; 
} 


.homeSide 
{ 
    position: absolute; 
    width: 250px; 
    height: 100%; 
    padding: 30px 0px; 
    background: trasparent; 
    max-height: 100%; 
    overflow-y: scroll; 

    ul 
    { 
     list-style-type: none; 
     margin: 0px auto; 

     li 
     { 
      font-family: Euclid; 
      font-size: 14px; 
      letter-spacing: 3px; 
      padding: 15px 10px; 

      a 
      { 
       text-decoration: none; 
       color: white; 
       width: 0px; 
       padding-bottom: 5px !important; 
       border-bottom: 2px solid transparent;  
       transition: 0.5s ease; 
       white-space: nowrap; 

       &:hover 
       { 
        border-bottom: 2px solid white; 
        width: 100%; 
       } 

      } 

     } 
    } 

} 


.footer 
{ 
    font-family: Euclid; 
    font-size: 14px; 
    letter-spacing: 3px; 
    background-color: @foot; 
    text-decoration: none; 
    padding: 20px; 
    text-align: center; 

    ul 
    { 
     list-style: none; 
     padding: 0px !important; 
     margin: 0px auto; 
    } 

    a 
    { 
     text-decoration: none; 
     color: white;   
    } 

    li 
    { 
     display: inline-block; 
     padding: 10px; 
    } 

} 


.social 
{ 
    font-family: Proxima; 
    font-size: 12px; 
    background-color: white; 
    text-transform: uppercase; 
    text-decoration: none; 
    letter-spacing: 2px; 
    padding: 20px; 
    text-align: center; 
    width: 100%; 

    img 
    { 
     -webkit-filter: brightness(100%); 

     &:hover 
     { 
      -webkit-filter: brightness(70%); 
      -webkit-transition: all 1s ease; 
      -moz-transition: all 1s ease; 
      -o-transition: all 1s ease; 
      -ms-transition: all 1s ease; 
      transition: all 1s ease; 
     } 

    } 

    ul 
    { 
     list-style: none; 
     padding: 0px !important; 
     margin: 0px auto; 
    } 

    a 
    { 
     text-decoration: none; 
    } 

    li 
    { 
     display: inline-block; 
     padding: 10px; 
    } 

}

來源

2017-02-25 Malik Brahimi