html - 我如何摆脱CSS上无用的滚动空间

标签 html css

好的,这是我的第一个 html/css/javascript 网站。我不确定出了什么问题,基本上我使用 css 使背景图像适合,然后我尝试使用添加图像链接

    <div id="project_button" style="position:relative; top: 1000px; left: 1000px" >

结果是水平滚动条上有 1000 像素的滚动空间。 当我尝试使用

编辑位置时,有类似的结果
    margin-left:1000px
    margin-top: 1000px

除了有额外空间的垂直滚动条。

    <html>
          <head>
          <title>Home Page</title>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <meta http-equiv="Imagetoolbar" content="no">
          <SCRIPT LANGUAGE="JavaScript">
          <!--

          if (document.images) {

          var button1_up = new Image();
          button1_up.src = "project1.gif";

          var button1_over= new Image();
          button1_over.src = "project2.gif";
          }

          function over_button(){
           if (document.images) {
       document["buttonOne"].src = button1_over.src
      }
    }

          function up_button() {
               if (document.images) {
               document["buttonOne"].src = button1_up.src
          }
    }
    //-->
    </SCRIPT>
    <style type="text/css">
    html {height:100%;}

    body {height:100%; margin:0; padding:0;}

    #bg {position:fixed; top:0; left:0; width:100%; height:100%;}


    </style>
    <!--[if IE 6]>
    <style type="text/css">
    html {overflow-y:hidden;}
    body {overflow-y:auto;}
    #bg {position:absolute;
    padding-right:800px;
    margin-right:-800px;}

    #project_button {position:static;}
    </style>
    <![endif]-->
    </head>
    <body>
          <div id="page1" style='position: relative'>   
      <div id="bg"><img src="WebBacking.jpg" width="100%" height="100%" alt="">
          </div>
      <div id="project_button" style="position:relative; top: 1000; left: 1000" >
        <a href="projects.html" onMouseOver="over_button()"
                 onMouseOut="up_button()">
        <img src="project1.gif" alt="click me" 
        width="1800" height="200" name="buttonOne" 
        border=0>
        </a>
      </div>
          </div>

    </body>
    </html> 

这是我的其余代码。任何帮助表示赞赏。

顺便说一句,当我垂直或水平滚动时,背景仍然适合,但因为图像的位置是静态的,所以它会在滚动时移动。我还应该提一下,当我设置

  top: 0; left:0;

滚动条被移除。这也适用于最高利润。

最佳答案

如果您根本不想在某些元素中使用滚动条,请将 overflow:hidden 添加到 css。这样,元素之外的所有内容都将被剪裁,并且看不到滚动条。

关于html - 我如何摆脱CSS上无用的滚动空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12133015/

相关文章:

jquery - 按钮将文本放在类的右上角

html - 在另一个 div 内滚动 div

javascript - 使 Youtube 360​​ 度视频在移动设备上运行

css - 为什么不在 CSS 中嵌套?

c# - 正则表达式查找 css 引用

html - 如何将背景图像拉伸(stretch)至 100% 宽度

javascript - 使用 find 在容器内进行 jQuery 搜索失去了对 jQuery 的控制

javascript - 使用CSS让点击的缩略图显示全尺寸

html - 单击 Bootstrap 删除焦点属性

css - 对齐不同 block 的子元素