html - HTML页面底部的滚动条

Question

我对这段代码有疑问：

<style>
#tabimg{
}
#tabpara{
position:relative;
left:310px;
top:-310px;
}
</style>

<h1>CLICK ON THIS HEADING</h1>
<div id="hideme" height="400">
  <div id="tabimg">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" width="300" height="300">
  </div>
  <div id="tabpara" width="300" height="300" >
    <p>Paragraph Text</p>
  </div>
</div>




<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#hideme").hide();
    $("h1").click(function(){
                $("#hideme").slideToggle(500);
    });
});
</script>

我在页面底部得到一个滚动条，我不知道为什么？我对 HTML+JavaScript 很陌生，如果是一个简单的错误，我深表歉意，谢谢 :)

Answer 1

您应该将 width 参数添加到您的 css 并删除直接 width="300" 参数：

#tabpara
{
 position:relative;
 left:310px; 
 top:-310px;
 width:300px;
}

Answer 2

你得到滚动条的原因是这个 CSS 规则：

#tabpara {
    left: 310px;
}

如果您不使用left. width="300"此外，您不应该依赖内联样式。使用 CSS 改变元素的宽度：

#tabpara {
    left: 310px;
    width: 300px;
    top: -310px;
}