子元素设置高度100%不等于父元素高度

来源：7-4 项目作业

慕运维4141298

2021-06-09 12:24:09

搜索框和提交按钮已经设置高度为100%，为什么不等于父元素的高度？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        input{
            border: none;
            outline: none;
            background: none;
        }
        input:focus{
            outline: none;
        }
        body{
            background-color: #FFB6C1;
        }
        #container{
            height: 30px;
            width: 200px;
            position: absolute;
            top: 50%;
            margin-top: -15px;
            left: 50%;
            margin-left: -100px;
            border: 1px solid #DC143C;
            box-sizing: border-box;
        }
        #content{
            background-color: #FFB6C1;
            height: 100%;
            width: 75%;
            display: block;
            float: left;
        }
        #search{
            background-color: #DC143C;
            color: #FFF;
            height: 100%;
            width: 25%;
            display: block;
            float: left;
        }
        #clearDiv::after{
            content: "";
            visibility: hidden;
            height: 0px;
            display: block;
            clear: both;
        }
        #clearDiv{
            zoom: 1;
        }
    </style>
</head>
<body>
    <form>
        <div id="container">
            <input type="text" name="content" id="content" placeholder="请输入...">
            <input type="submit" name="search" id="search" value="搜索">
            <div id="clearDiv"></div>
        </div>
    </form>
</body>
</html>