仿写星巴克侧面导航栏，出现的问题的是可视窗口减小不出现滚动条。
<style>
*{margin:0;padding: 0;}
html,body{height: 100%;font-size: 10px;}
a{
text-decoration: none;
list-style: none;
}
.box{
width: 30%;
height: 100%;
background: red;
left: 0;
top: 0;
overflow-y: auto;
position: relative;
overflow: hidden;
float: left;
}
header{
height: 48px;
padding: 24px;
}
header .starbuck{
float: left;
margin-right: 12px;
width: 36px;
}
header .starbuck img{
width: 36px;
height: 36px;
float: left;
}
header .iconClose{
float: right;
width: 24px;
}
.body{
/*height: calc(100%-48px);*/
height: 100%;
width: 100%;
display: table;
}
.body .middle{
padding: 0 24px 0 48px;
/*height: 100%;*/
display: table-cell;
vertical-align: middle;
}
.body .middle ul{
width: 100%;
display: inline-block;
}
.body .middle ul li{
display: block;
margin: 5px 0;
}
.body .middle ul a{
font-size: 1.8rem;
color: #000;
padding: 5px 10px;
font-weight: 700;
height: 26px;
line-height: 26px;
display: block;
}
.option{
width: 100%;
font-size: 16px;
height: 39px;
padding: 10px 0 0;
}
.body .option .sign-in{
float: left;
margin-right: 24px;
/*padding: 3px 0;*/
}
.body .option .sign-in img{
margin:-3px 4px 0 0;
vertical-align: middle;
}
.button{
border: 1px solid #00A862;
border-radius: 48px;
box-sizing: border-box;
outline: none;
overflow: hidden;
}
.body .option .register{
padding: 4px 12px;
}
.body .option a{
color: #00A862;
}
.footer{
font-size: 1.4rem;
width: 100%;
margin-top:12px;
color: rgba(0,0,0,0.38);
}
.footer p{
font-size: 12px;
}
.footer p img{
width: 10px;
height: 10px;
}
.content{
width: 70%;
margin-left: 30%;
background: yellow;
position: relative;
top: 0;
right: 0;
float: right;
}
.content .banner{
width: 100%;
}
.content .banner img{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<header>
<a href="" class="starbuck">
<img src="img/logoImg/logo.svg"/>
</a>
<img src="icon/icon-close.svg" class="iconClose"/>
</header>
<section class="body">
<div class="middle">
<ul>
<li>
<a href="" class="overlay">门店</a>
</li>
<li>
<a href="" class="overlay">星享俱乐部</a>
</li>
<li>
<a href="" class="overlay">菜单</a>
</li>
<li><hr/></li>
<li>
<a href="" id="app-overlay">星巴克移动应用</a>
</li>
<li>
<a href="" id="stroes-overlay">星礼卡</a>
</li>
<li>
<a href="" id="starbucks_reserve-overlay"> 星巴克臻选™</a>
</li>
<li>
<a href="" id="starbucks_deliverey-overlay">专星送™</a>
</li>
<li>
<a href="" id="coffeehouse-overlay">咖啡星讲堂</a>
</li>
<li>
<a href="" id="roastery-overlay">上海烘培坊</a>
</li>
<li>
<a href="" id="about-overlay">关于星巴克</a>
</li>
<li>
<a href="" id="help-overlay">帮助中心</a>
</li>
<li><hr /></li>
</ul>
<div class="option">
<a href="" class="sign-in">
<img src="icon/icon-account.svg"/>
<span>登录</span>
</a>
<a href="" class="register button">
<span>注册</span>
</a>
</div>
</div>
</section>
<footer class="footer">
<a href="" id="en-collapse" class="lang">English</a>
<span> | </span>
<a href="" id="privacy-collapse">隐私政策</a>
<span> | </span>
<a href="" id="terms-collapse">使用条款</a>
<p>
<a href=""><img src="img/logoImg/icpicon.png"/> 沪网安备 31010102000318号</a>
<span> | </span>
<a href="">沪ICP备17003747号</a>
</p>
</footer>
</div>
<div class="content">
<div class="banner">
<img src="img/summer/banner-1.jpg"/>
</div>
</div>
</body>
</html>
