个人中心
gpt4 book ai didi

html - 如何在左、右菜单和导航栏保持不动的情况下使主要部分滚动？

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

<html>
    <head>
        <title>The testing page</title>

        <style type="text/css">
        body{

            margin: 0px;
            padding: 0px;

        }

        #topbar{

            background-color: blue;
            width: 100%;
            height: 35px;
            margin: 0px auto; 


        }

        #logo{

            width: 100px;
            margin-left: 100px; 
            float: left;


        }

        #searchbar{

            margin-top: 5px;
            margin-left: 10px;
            height: 25px;
            width: 400px;
            float: left;
            border-radius: 2px;
            border: 1px #000 solid;
            padding: 5px 5px 5px 5px;
            position: absolute;
            z-index: 5;

        }

        #leftmenu{

            float: left;
            width: 300px;
            background-color: green;
            height: 500px;
            margin-left: 25px;
            margin-top: 10px;

        }

        #main{

            background-color: yellowgreen;
            height: 100%;
            width: 500px;
            position: relative;
            margin-top: 10px;
            margin-left: 335px;
            padding: 16px;

        }

        h1{
            margin: 0px

        }

        p{
            margin: 0px

        }



        </style>

    </head>

    <body>

        <div id="topbar">

            <img id="logo" src="images/explogo.png">
            <input id="searchbar" type="text" placeholder="Search">

        </div>

        <div id="leftmenu">
        </div>

        <div id="main">
                <h1>Fixed Top Menu</h1>
                <h2>Scroll this page to see the effect</h2>
                <h2>The navigation bar will stay at the top of the page while scrolling</h2>

                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <p>Some text some text some text some text..</p>
                <h1>Fixed Top Menu</h1>
                <h2>Scroll this page to see the effect</h2>
                <h2>The navigation bar will stay at the top of the page while scrolling</h2>

        </div>





    </body>

</html>

我一直在学习 CSS 和 HTML，但我完全是个新手，我知道你们中的一些人会笑。但是，如何使主要部分滚动而左侧、右侧菜单和导航栏保持不动？我在主要部分添加了一些文本，但是当我滚动左侧菜单时，导航栏和主要部分一起滚动

最佳答案

如果您将#main 更改为下方，将出现一个滚动条。那是你要去的吗？这些更改使您的高度成为静态值，然后添加滚动溢出。我还必须针对您的特定示例调整宽度。

 #main{
        background-color: yellowgreen;
        width: 450px;
        position: relative;
        margin-top: 10px;
        margin-left: 335px;
        padding: 16px;
        height:500px;
        overflow:scroll;
    }

关于html - 如何在左、右菜单和导航栏保持不动的情况下使主要部分滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51795891/

25 4 0
文章推荐： javascript - 什么构成了对基本 Google Maps JS api 的调用？
文章推荐： css - 如果我只有原始和生成的 jpeg，是否可以确定已应用于图像的确切 css 图像过滤器？
文章推荐： javascript - 如何在不同设备上连续显示固定数量的图像
文章推荐： html - 背景图片不适合移动设备 - CSS