个人中心
gpt4 book ai didi

html - 边栏和内容 : Scroll Issues

转载 作者：行者123 更新时间：2023-11-28 04:16:41 27 4
gpt4 key购买 nike

我正在尝试构建一个带有侧边栏和主要内容右侧的网站。尽管我已经尝试了多种方法来让它工作，但它的表现并不如我所愿。本质上，我希望它们在溢出整个页面 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>

enter image description here

如您所见，侧边栏和内容有三个滚动条，而不是一个滚动条。很奇怪，右边似乎还超过了左边。这是我的 HTML 和 LESS。有什么想法吗？

(附: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;
    }

}

最佳答案

为什么不直接在 body 上使用 hidden overflow..

body
{
    overflow: hidden;
}

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

关于html - 边栏和内容 : Scroll Issues，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42457591/

27 4 0
文章推荐： javascript - Rails 5 中的 Material 选项卡与 Turbolinks
文章推荐： javascript - 如何将子任务输出到图表 d3.js？
文章推荐： c++ - 使用 SDL_PollEvent 与 SDL_PumpEvents
文章推荐： jquery - 使用数组的 .join() 通过 jQuery 插入 HTML
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com