Question

在下面的代码中，当屏幕大小小于页面的所有元素时，我希望名为“buttons_wrapper”的div滚动，但不起作用。我有一个几乎相同的页面，但它的工作完美。它有什么问题？

抱歉我的英语不好。

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
    <style>
        body{
            background-color: #bfbfbf;
            overflow: hidden;
        }

        #buttons_wrapper{
            margin: 0 auto;
            padding: 25px 0 25px 0;
            width: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }

        #ad_banner{
            position: fixed;
            overflow: hidden;
            bottom: 0;
        }

        .top_bot_space{
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .my-btn{ 
            background-color: #000;
            color: #00FFF6;
            border-color: #00FFF6;
            font-weight: bold;
        }

        .my-btn:hover{
            background-color: #000;
            color: #F82F5F;
            border-color: #F82F5F;
        }
    </style>
</head>
<body>
    <div id="logo">
        <img src="images/logo.png" class="img-responsive" />
    </div>
    <div id="buttons_wrapper">
        <div class='container text-center top_bot_space'>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
                <a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i>&nbsp;&nbsp;webpage</a>
            </div>
        </div>
        <div class='container text-center top_bot_space'>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
                <a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i>&nbsp;&nbsp;webpage</a>
            </div>
        </div>
        <div class='container text-center top_bot_space'>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
                <a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i>&nbsp;&nbsp;webpage</a>
            </div>
        </div>
        <div class='container text-center top_bot_space'>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
                <a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i>&nbsp;&nbsp;webpage</a>
            </div>
        </div>
        <div class='container text-center top_bot_space'>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
                <a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i>&nbsp;&nbsp;webpage</a>
            </div>
        </div>
        <div class='container text-center top_bot_space'>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
                <a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i>&nbsp;&nbsp;webpage</a>
            </div>
        </div>
    </div>
    <div id="ad_banner">
        <script type="text/javascript" src="somescript.js"></script>
    </div>

    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript">
        var body_height = $("body").outerHeight();
        var logo_height = $("#logo").outerHeight();
        var ad_banner_height = $("#ad_banner").outerHeight();
        var buttons_wrapper_height = body_height - logo_height - ad_banner_height;
        $("#buttons_wrapper").css("height", buttons_wrapper_height + "px");
    </script>
</body>

Answer 1

修改

根据您的其他说明，需要在<body>上设置基于视口的高度，以避免body高度由其内容决定。像这样：

body { height: 100vh; }

Updated Fiddle

原始答案

问题似乎与垂直滚动有关，因为您目前overflow: hidden设置了<body>。因此，在屏幕较短的手机上，您将无法向下滚动。如果您想要防止水平滚动，请将其更改为overflow-x: hidden，您应该做得很好。

Fiddle

溢出在哪里？

1 个答案: