Question

<!DOCTYPE html>
<html>
           <head>
            <meta charset="utf-8">
            </head>
         <body>
                <div class = "wrapper">
                    <header>
                                <div class = "CentralHeader">
                                    <div class = "LinkBar" id = "HeaderBar" >All</div>
                                <div class = "SampleMenu">
                                <ul>
                                    <li><a href = "#Movies">Movies</a></li>
                                    <li><a href = "#Events">Events</a></li>
                                    <li><a href = "#Sports">Sports</a></li>
                                    <li><a href = "#Plays">Plays</a></li>       
                                </ul>
                               </div>
                        </div>
                </header>
                <main>
                    <div class = "main">
                        <div class = "TopMovies" >
                        </div>
                        <div class = "JustForYou">
                        </div>
                    </div>
                </main>
            </div>
            </body>
            <style type="text/css">
            .wrapper{
                height: 100vh;
                display: flex;
                flex-direction:column;
            }
            header{
                height: 400px;
                border-bottom: 4px solid beige;
              }
            main{
                flex:1
            }

         .LinkBar {
        cursor: pointer;
        width: 140px;
        height: 37px;
        border: 1px solid #c02c3a;
        margin-top: 50px;
        margin-left: 300px;
        background-color: #c02c3a;
        text-align: center;
        padding-top: 9px;
        color: white;
        display: inline-block;
        }
        div.SampleMenu ul {
            list-style-type: none;
            width: 140px;
            background-color: Grey;
            margin-left: 300.5px;
            padding: 0;
            margin-top: 0px;
            display: none;
            border-top: 2px solid #fff;
        }
       div.SampleMenu ul li {
        color: White;
        padding: 0;
        }
           div.SampleMenu ul li a {
            color: white;
            display: block;
            padding: 10px;
            font-size: large;
            text-align: center;
        }
          #HeaderBar:hover~.SampleMenu ul,
            .SampleMenu ul:hover {
            display: block;
            }
          .main{
            width:auto;
            height: 500px;
            border:2px groove red;
            }
            </style>
            </body>
            </html>

在上面的段中，“header”的容器空间在盘旋LinkBar.On悬停时被改变，下拉列表显示上面提到的标题高度但是在正常状态下，标题高度降低。当CSS属性时对于包装器标签被删除，功能即标头的容器空间可用，如CSS（400px）中所述。是什么导致标头的高度是动态的？

Answer 1

如果您希望菜单与标题重叠，则需要添加＆＃34; position：absolute;＆＃34;到菜单（div.SampleMenu ul在你的情况下具体）和＆＃34; position：relative;＆＃34;到标题。

您应该阅读更多关于定位方式以及它们如何相互作用的信息。

标头容器的高度是动态的

1 个答案: