为什么子元素不适合父元素（导致滚动条）？

Question

我有一个子元素，该元素不适合父元素（看起来像1px），导致垂直滚动条。仅在旧版本的Windows / Internet Explorer中会出现此问题。我认为是Windows 7。

更多详细信息：<label for="toggle">Menu</label>是带有滚动条的元素，因为它似乎不适合<header>内。但是header的高度是由label确定的，所以我不明白为什么会这样。

JS Fiddle示例：https://jsfiddle.net/a9zkgyx7/

<header>
    <div class="logo"><a href="index.html"><img src="resources/logo.svg"></a></div>
    <input type="checkbox" id="toggle">
    <label for="toggle">Menu</label>
    <nav>
        <ul>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
        </ul>   
    </nav>
</header>





 article, aside, figure, footer, header, main, nav, section {
        display: block;
        }

header { 
    padding:0 3.6rem;
    border-bottom:1px solid;
    overflow:auto;
    }

.logo {
    float:left;
    width:13.2rem;
    }

#toggle {
    display: none;
    }

#toggle ~ label {
    display: inline-block;
    cursor: pointer;
    float:right;
    font-size:2.4rem;
    line-height:7.1rem;
    }


nav {
    height:0;
    overflow:hidden;
    position:absolute;
    top:7.2rem;
    left:0;
    right:0;
    background-color:rgb(255,255,255);
    z-index:102;
    text-align:center;
    font-size:4.8rem;
    line-height:1.75em;
    }

#toggle:checked ~ nav {
    height: 100%;
    }

Answer 1

在css标头中，您必须将overflow:auto;更改为overflow:hidden;，这将隐藏滚动条。