标题容器的高度是动态的答案

【问题标题】：Height of header container is dynamic标题容器的高度是动态的
【发布时间】：2018-01-28 16:55:09
【问题描述】：

<!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时发生了变化。悬停时，下拉菜单显示为header提到的高度，但在正常状态下，header高度减小。当CSS属性对于包装标签被删除，功能，即标题的容器空间可用CSS（400px）中提到的。是什么导致标题的高度是动态的？

【问题讨论】：

标签： html css height

【解决方案1】：

如果想让菜单与表头重叠，需要加上“position:absolute;”到菜单（在你的情况下是 div.SampleMenu ul 是具体的）和“位置：相对；”到标题。

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

【讨论】：

我不希望菜单与下表重叠。我希望表格有间距，以免与菜单冲突