标头容器的高度是动态的

<!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上时被改变.在悬停时，下拉菜单显示标题的高度，但在正常状态下，标题高度降低。当包装标签的 CSS 属性被删除时，功能即标头的容器空间可用，如 CSS (400px( 中所述。是什么导致标题的高度是动态的？

如果您希望菜单与标题重叠，则需要在菜单中添加"位置：绝对;"(div.SampleMenu ul 在您的情况下是特定的(和"位置：相对;"到标题。

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

相关内容

最新更新

热门标签：