为什么当我向下移动文本时，浏览器内部会出现另一个垂直滚动条？
[英]Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser?
问题描述
Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser its right where then width ends at approximately 1000px is there a way to extend the length of my page or a simple way to hide the scroll bar that is showing vertically? 
为什么当我向下移动文本时，另一个垂直滚动条出现在浏览器的内部，它的右边然后宽度大约为1000px，这是一种延长页面长度的方法，或者是一种简单的隐藏滚动条的方法垂直显示？ I still want the default browser vertical scroll bar to show. 我仍然希望显示默认的浏览器垂直滚动条。 All tips are appreciated thank you! 所有提示均表示感谢，谢谢！
If you need to seen any of my code just ask thanks again! 如果您需要查看我的任何代码，请再次感谢！ HTML: HTML：
<head>
<meta charset="utf-8" />
<title> Iamdrivingtoday.com </title>
<link rel="stylesheet" href="mfcc.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#fadein {
position: relative;
height:100%;
width:100%;
}
#fadein img {
position:absolute;
left:0;
top:0;
}
-->
</style>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="iadt.jpg" height="100" width="300"> </img>
</header>
<center><nav id="top_menu">
<ul>
<li><a href="Iamdrivingtoday.com/Home">Home</a></li>
<li><a href="Iamdrivingtoday.com/Application">Application</a></li>
<li><a href="Iamdrivingtoday.com/Privacy Policy">Privacy Policy</a></li>
<li><a href="Iamdrivingtoday.com/ContactUs">Contact Us</a></li>
</ul>
</nav> </center>
<div class="fadein">
<img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
</div>
<div class="bg1">
<img src="images/bg1.jpg" width=1500 height=308 style="position: absolute; left: -125px; top: 477px;">
</div>
<img src="Images/images/newcar.png" width=150 height=150 style="position: relative; top: 320px; left: 100px">
<img src="Images/images/usedcar.png" width=150 height=150 style="position: relative; top: 320px; left: 500px">
<section id="new_car">
<center> <h3>New Car Loan Requirements</h3> </center>
<p> If you're ready to apply for a new car loan, fill out our quick an easy application here at
Iamdrivingtoday.com But obviously, you don't want to waste your time when you don't
know the requirements to get approved for a new car loan. Here's what you'll need to qualify:
</p>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>
<section id="main_section" style="position: relative; right: 0px;">
<article>
<header>
<hgroup>
<center><h1>What is Iamdrivingtoday.com?</h1></center>
</hgroup>
</header>
<p>Iamdrivingtoday.com is where we specialize in providing auto loans for people with bad credit.
We know that new and used car customers in certain times need help
finding the right auto loan provider. If you think you
have a really bad, or low credit rating, or you have been
turned down in the past, chances are we can help!
Our specialty is getting you financed and we guarantee an
approval!</p>
</article>
<article>
<header>
<hgroup>
<center><h1>Having a hard time getting approved?</h1></center>
</hgroup>
</header>
<p>No matter what your prior credit which may be due to bankruptcy, divorce,
foreclosure, repossession, late payments, or unpaid balances we get
you driving the same day no matter your circumstances.
Just fill out the application and drive away today.</p>
</article>
</section>
<div id="new_div">
<aside id="side_news">
<h4>What your Dealer needs!</h4>
<center>Paystubs!</center>
<center>$1000 Down!</center>
<center>Proof of Insurance!</center>
</aside>
</body>
</html>
CSS: CSS：
*{
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
h1{
font:bold 16px tahoma;
}
}
header,section,footer,aside,nav,article,hgroup{
display: block;
}
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
section{
font: 12px Verdana;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: transparent;
padding: 5px;
text-align: center;
}
#top_menu{
border: 1px solid black;
background:-webkit-linear-gradient(left, #BDBDBD, #E6E6E6, #BDBDBD);
width: 998px;
text-align: center;
box-sizing: border-box;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px 20px;
font: bold 14px tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#new_car{
Position: relative;
Top: 20px
}
#bg1{
border: 3px solid black;
}
#main_section{
Position: relative;
border:1px solid black;
color: white;
text-shadow:
2px 2px 0 #000,
1px 1px 0 #000;
background-image:url('tb.png');
background-size: 365px 325px;
background-color:#cccccc;
-webkit-box-flex: 1;
float: right;
margin: 15px;
margin-top: 300px;
margin-right: 625px;
padding: 20px 20px;
}
#side_news{
border: 1px solid black;
width: 250px;
margin: 20px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
3 个解决方案
解决方案1
3 2014-07-30 18:24:51
Best guess without seeing code: You have a set height on that container element with overflow:auto 不用看代码的最佳猜测：您在容器元素上设置了一个带有溢出的高度：自动
Edit: After looking at your code, I think the best thing to do in this situation is to encourage you to spend some more time reading up about HTML and CSS. 编辑：查看代码后，我认为在这种情况下最好的做法是鼓励您花更多时间阅读有关HTML和CSS的内容。 You have a lot of inline styles and you're positioning things that really mess up the natural flow of the document. 您有很多内联样式，并且要放置的东西确实弄乱了文档的自然流程。 This isn't a small error that's happening but just fundamentally poor code. 这不是一个很小的错误，只是根本上不好的代码。
I'm not saying this to be mean, but this scroll bar is the least of your problems. 我并不是说这是故意的，但是此滚动条是您遇到的最少问题。
解决方案2
0 2014-07-30 18:26:41
By default when your contents height or width exceeds the height or width of the container explicitly set by you, the css properties overflow-y and overflow-x are enabled. 默认情况下，当内容的高度或宽度超过您明确设置的容器的高度或宽度时，将启用css属性overflow-y和overflow-x 。
Disabling the overflow-y value on that particular element will remove the scrollbar. 在该特定元素上禁用overflow-y值将删除滚动条。
overflow-y:hidden
To avoid the content from being clipped, increase the height of the container or reduce the content or vice-versa. 为避免内容物被夹住，请增加容器的高度或减少内容物，反之亦然。 Not setting the height explicitly or setting it to auto will ensure the container expands enough to prevent its contents from overflowing. 不明确设置高度或将其设置为自动将确保容器扩展到足以防止其内容溢出的高度。
解决方案3
-1 2014-07-30 18:30:05
You should use, 你应该用
overflow-y:hidden; 溢出-γ：隐藏; - Use this for hiding the Vertical scroll -用它来隐藏垂直滚动
overflow-x:auto; 溢出 - X：汽车; - Use this to show Horizontal scroll -用它来显示水平滚动
For IE8: -ms-overflow-y: hidden; 对于IE8：-ms-overflow-y：隐藏；
http://www.w3schools.com/cssref/pr_pos_overflow.asp http://www.w3schools.com/cssref/pr_pos_overflow.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.