Javascript 溢流阀在哪里？
在下面的代码中，我希望名为“buttons\u wrapper”的div在屏幕大小小于页面的所有元素但不起作用时滚动。我有一个几乎相同的页面，但它工作得很好。怎么了 对不起，我的英语不好Javascript 溢流阀在哪里？,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,在下面的代码中，我希望名为“buttons\u wrapper”的div在屏幕大小小于页面的所有元素但不起作用时滚动。我有一个几乎相同的页面，但它工作得很好。怎么了 对不起，我的英语不好 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=
<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> 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> 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> 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> 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> 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> 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>
身体{
背景色：#bfbf；
溢出：隐藏；
}
#纽扣包装{
保证金：0自动；
填充：25px 0 25px 0；
宽度：100%；
溢出x：隐藏；
溢出y：自动；
}
#阿杜旗{
位置：固定；
溢出：隐藏；
底部：0；
}
.top_bot_空间{
边缘顶部：10px；
边缘底部：10px；
}
.my btn{
背景色：#000；
颜色：#00FFF6；
边框颜色：#00FFF6；
字体大小：粗体；
}
.我的btn:悬停{
背景色：#000；
颜色：#F82F5F；
边框颜色：#F82F5F；
}
变量body_height=$（“body”）.outerHeight（）；
var logo_height=$（“#logo”）.outerHeight（）；
var ad#u banner_height=$（“#ad#u banner”）.outerHeight（）；
var按钮包装高度=车身高度-徽标高度-广告横幅高度；
$（“#按钮#包装”）.css（“高度”，按钮#包装#高度+“px”）；
主体高度由其内容决定。像这样：
body { height: 100vh; }
原始答案
问题似乎出在垂直滚动上，因为您当前在
上设置了溢出：隐藏。因此，在屏幕较短的手机上，您将无法向下滚动。如果您想继续阻止水平滚动，请将其更改为overflow-x:hidden
，这样您应该会做得很好
“……但不起作用。”没有多大帮助。请完整描述您的问题和调试尝试根本没有滚动条。但我不想滚动整个页面。我只需要滚动按钮。如果我从正文中删除overflow:hidden，则整个文档的滚动条都会出现。好的，有意义。然后我认为问题在于
的高度不受视口高度的限制，而是基于您的内容。因此，函数中的body\u height
值不会随着视口的缩短而改变。您可以将
设置为始终将视口与vh
匹配；尝试添加高度：100vh至正文
。将编辑答案，如果这是你正在寻找的。哦！！！！！你是对的！我忘了设定身高。我设定为100%。非常感谢你！很酷，很乐意帮忙：）