Rafail Antoniadis Rafail Antoniadis - 9 months ago 25
CSS Question

Where is the overflow?

In the following code, I want the div named "buttons_wrapper" to scrolling when the size of the screen is smaller than all elements of the page, but doesn't work. I have an almost the same page but it works perfectly. What's the wrong with it?

Sorry for my bad english.

<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 Source

EDIT

Based on your additional explanation, a viewport-based height needs to be set on <body>, to avoid the body height being determined by its content. Like so:

body { height: 100vh; }

Updated Fiddle

Original Answer

The issue seems to be with vertical scroll, because you currently have overflow: hidden set on your <body>. So on a phone with a shorter screen, you wouldn't be able to scroll down. Change that to overflow-x: hidden if you'd like to keep preventing horizontal scroll, and you should be good.

Fiddle