山河小曲
2019-05-08 12:11
采纳率: 100%
浏览 412
已采纳

可视化窗口减小滚动条不出现问题

图片说明图片说明

仿写星巴克侧面导航栏,出现的问题的是可视窗口减小不出现滚动条。

        <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>&nbsp;|&nbsp;</span>
                <a href="" id="privacy-collapse">隐私政策</a>
                <span>&nbsp;|&nbsp;</span>
                <a href="" id="terms-collapse">使用条款</a>
                <p>
                    <a href=""><img src="img/logoImg/icpicon.png"/>&nbsp;沪网安备 31010102000318号</a>
                    <span>&nbsp;|&nbsp;</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>

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • 前端○萌妹 2019-05-08 14:50
    最佳回答

    .box里面的height:100%,去掉

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题