Question

我正在尝试为主要内容构建一个带有侧边栏和右侧的网站。虽然我已经尝试了很多方法来实现它，但它并没有像我希望的那样表现。从本质上讲，我希望它们在整页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。有什么想法吗？

（P.S.Bootstrap网格元素在内容窗格中也不起作用）

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

}

Answer 1

为什么不在身体上使用隐藏的溢出..

body
{
    overflow: hidden;
}

http://www.codeply.com/go/WEKeQJfWrP

Answer 2

禁用带有overflow-y的滚动条：隐藏在这两个元素上。

边栏和内容：滚动问题

2 个答案: