<html>
<head>
<style>
#sub{//通过id实现
width:300px //只是假定的值,需要根据实际的要求写。
height:30px
}
</head>
<body>
<input type='submit' value="提交" id='sub'>
</body>
</html>
<style>html,body {height:100%}
#main {display:flex flex-direction:column width:800px height:60% border:1px solid red}
#sub1 {flex:auto border:1px solid blue}
#sub2 {flex:0 1 10% border:1px solid blue}
</style>
<div id="main">
<div id="sub1" onclick="sub2.style.display='block'">点我显示下面小div。当前div会自动占满剩余空间。外面的大div的高度是整个页面可视高度的60%</div>
<div id="sub2" onclick="this.style.display='none'">点我隐藏(此div的高度为10%)</div>
</div>