溢出文本框在页面底部添加空白区域

时间：2015-12-14 09:23:41

标签： html css

我不确定如何解释这一点，因为我还不熟悉编码，但我正在尝试为HEX制作一个配置文件布局，并且我每次制作时都会遇到这个问题：< / p>

enter image description here

我注意到当我编辑我的滚动条时，空格会相应地改变它的大小。滚动框越大，空间越大，反之亦然。这是我上一个档案的代码：

body {
  background-image: url(http://i.imgur.com/X3qmTN2.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  height: 100px;
  padding-bottom: 0;
  font-family: Arial, sans-serif;
  color: #e80812;
  text-alignment: justify;
}
#nav {
  width: 400px;  
  line-height: 80px;
  padding-top: 670px;
}


#nav a:link, #nav a:visited, #nav a:active {
  display: block;
  font: 14px  "arial";
  text-transform: uppercase; 
  text-decoration: none; 
  text-align: center;
  letter-spacing: 2px; 
  color: #ab4860; 

  padding: 7px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#nav a:hover {
  letter-spacing: 5px;
  color: #74194e;
  padding: 7px 2px;
}
  .hex {
    position: relative;
    top: 600px;
    left: 100px;
    background-color: transparent;
    text-align: center;
  }
  .owl {
    position: relative;
    top: 800px;
    left: 100px;
    background-color: transparent;
    text-align: center;
  }
  .club {
    position: relative;
    top: 1000px;
    left: 100px;
    background-color: transparent;
    text-align: center;
  }
  b { color: #ab4860; }
  u { color: #ab4860; }
  i  { color: #ab4860; }
<div id="nav">
<div class="hex"><a href="http://www.hexrpg.com/my.php">Back to HEX</a></div><br>
<div class="owl"><a href="http://www.hexrpg.com/owlpost.php?action=compose">Owl Me</a></div><br>
<div class="club"><a href="http://www.hexrpg.com/f/16063">Club Rainbow Brigade</a></div><br>
</div>

<div align="left">
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>

</body>

我需要在代码中添加或删除某些内容吗？我在某个地方搞砸了，我看不到它？

4 个答案:

答案 0 :(得分：1)

我编辑您的代码并获得有效的解决方案：

html, body {
  margin:0;
  padding:0;
}
body {
  background-image:url(http://i.imgur.com/X3qmTN2.png);
  background-repeat: no-repeat;
  color:#e80812;
  font-family:arial, sans-serif;
  height:1660px;
  text-align: justify;
  width:1300px;
}
#nav {
  line-height:80px;
  position:absolute;
  top:640px;
  width:400px;  
}
#nav a:link, 
#nav a:visited, 
#nav a:active {
  color: #ab4860; 
  display: block;
  font-family:arial;
  font-size:14px;
  letter-spacing:2px; 
  padding:7px;
  text-align:center;
  text-decoration:none; 
  text-transform:uppercase; 
  
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
#nav a:hover {
  color:#74194e;
  letter-spacing:5px;
  padding:7px 2px;
}
.hex {
  position:relative;
  text-align:center;
}
.owl {
  position:relative;
  text-align:center;
  top:15px;
}
.club {
  position: relative;
  text-align: center;
  top:30px;
}
.content {
  height:850px;
  left:390px;
  overflow:auto;
  position:absolute;
  top:640px;
  width:910px;
}
b, u, i {
  color: #ab4860;
}
<div id="nav">
  <div class="hex"><a href="http://www.hexrpg.com/my.php">Back to HEX</a></div>
  <div class="owl"><a href="http://www.hexrpg.com/owlpost.php?action=compose">Owl Me</a></div>
  <div class="club"><a href="http://www.hexrpg.com/f/16063">Club Rainbow Brigade</a></div>
</div>
<div align="left">
  <div class="content">Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
</div>

您的HTML和CSS代码中存在一些拼写错误。我解决了这个问题并进行了一些更改，将所有元素放在正确的位置。

你可以在这里找到一个工作小提琴：http://jsfiddle.net/hhf2kpLd/

答案 1 :(得分：0)

我对您的代码进行了一些更改，通过此模式，菜单的文本就位于他的位置。顶部和左侧是0像素。请参阅完整页面中的代码段：

＆＃13;
＆＃13; 
body {
  background-image: url(http://i.imgur.com/X3qmTN2.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  height: 100px;
  padding-bottom: 0;
  font-family: Arial, sans-serif;
  color: #e80812;
  /* text-alignment doesnt exists, it's text align*/
  text-align: justify;
}
#nav {
  width: 400px;  
  line-height: 80px;
  padding-top: 670px;
}


#nav a:link, #nav a:visited, #nav a:active {
  display: block;
  font: 14px  "arial";
  text-transform: uppercase; 
  text-decoration: none; 
  text-align: center;
  letter-spacing: 2px; 
  color: #ab4860; 

  padding: 7px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#nav a:hover {
  letter-spacing: 5px;
  color: #74194e;
  padding: 7px 2px;
}
  .hex {
    position: relative;
    top: 0;
    left: 0;
    background-color: transparent;
    text-align: center;
  }
  .owl {
    position: relative;
    top: 0;
    left: 0;
    background-color: transparent;
    text-align: center;
  }
  .club {
    position: relative;
    top: 0;
    left: 0;
    background-color: transparent;
    text-align: center;
  }
  b { color: #ab4860; }
  u { color: #ab4860; }
  i  { color: #ab4860; }
＆＃13; 
<div id="nav">
<div class="hex"><a href="http://www.hexrpg.com/my.php">Back to HEX</a></div><br>
<div class="owl"><a href="http://www.hexrpg.com/owlpost.php?action=compose">Owl Me</a></div><br>
<div class="club"><a href="http://www.hexrpg.com/f/16063">Club Rainbow Brigade</a></div><br>
</div>

<div align="left">
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

BR标签是你的垮台，我也改变了其他一些东西。

<div id="nav">
  <div class="hex"><a href="http://www.hexrpg.com/my.php">Back to HEX</a></div>
  <div class="owl"><a href="http://www.hexrpg.com/owlpost.php?action=compose">Owl Me</a></div>
  <div class="club"><a href="http://www.hexrpg.com/f/16063">Club Rainbow Brigade</a></div>
</div>

http://jsfiddle.net/link2twenty/xxvkzz28/

答案 3 :(得分：0)

div 

<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
    Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>

使您的内容超出HTML内容的分隔区域。使用浏览器检查器查看它。我认为某些浏览器会以不同的方式解释您的代码，结果会有所不同（例如，有一些空格）。 你可以先将你的img上传到另一个网站（如casimage.com），因为它锁定了我（代理限制）吗？然后你应该以不同的方式构建你的网站，没有相对或绝对的位置。

相关问题
最新问题