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

【问题标题】：Why is child element not fitting inside parent element (resulting in scroll bars)?为什么子元素不适合父元素（导致滚动条）？
【发布时间】：2019-05-03 21:10:38
【问题描述】：

我有一个子元素，它不适合父元素（看起来像 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%;
    }

【问题讨论】：

你可以用这个overflow-y: hidden;隐藏你的滚动条
好的，但我宁愿一开始就没有滚动条。
我们谈论的是几岁？这是不将header 和nav 等元素识别为块的IE 版本吗？如果是这样，请安装 HTML5shim。
我认为是 Windows 7 我注意到了这个问题。我的 CSS 包含以下代码： header, nav { display: block; }。我认为这应该对不支持 HTML5 的旧浏览器有用吗？
会不会是浏览器太旧了，需要float 的供应商前缀？一般来说，如果某些东西不能只在一个浏览器上运行（尤其是 IE），那么通过自动前缀运行你的代码总是值得一试的。

标签： html css

【解决方案1】：

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

【讨论】：