时间戳

首页 > 解决方案 > 我的文字定位是否在拉伸我的网站高度？

javascript - 我的文字定位是否在拉伸我的网站高度？

问题描述

我正在为我的大学项目制作一个网站，并且我正在处理一些关于我的文本课程的问题。出于某种原因，我的班级似乎有一个奇怪的高度，导致我的网页底部出现一条白色条带。

 #index-section div.index-title-quote{
      top: 165%;
      left: 50%;
      margin-bottom: -100%;
      transform: translate(-50%,-50%);
      position: absolute;
      z-index: 1;
    
    }
    
    #index-section div.index-title-quote h2{
    
      font-family: 'Bebas Neue', cursive;
      color: #fff;
      font-size: 20px;
      padding: 20px;
      opacity: 0.8;
    }
    
    #index-section div.index-title-quote h5{
    
      font-family: 'Roboto', sans-serif;
      color: #fff;
      font-style: italic;
      font-size: 13px;
      opacity: 0.6;
    }
<div id="index-section">
    <div class="index-title-quote">
        <center><h2>"Honour may not win power, but it wins respect. And respect earns power</h2></center>
        <center><h5>- Ishida Mitsunari, legendary samurai</h5></center>
    </div>

这是我的代码，感谢您花时间阅读。

标签： javascripthtmlcss

解决方案

你的代码有很多错误。首先，您的第一个<div>标签没有关闭。

<div id="index-section">

您的文字在白色背景上是白色的，因此无法看到。

color: #fff;

您的 div 文本位于距顶部 165% 的页面高度，确保根本看不到它。

top: 165%;

我附上了这些修复的片段

#index-section div.index-title-quote{
      top: 10%;
      left: 50%;
      margin-bottom: -100%;
      transform: translate(-50%,-50%);
      position: absolute;
      z-index: 1;
    
    }
    
    #index-section div.index-title-quote h2{
    
      font-family: 'Bebas Neue', cursive;
      color: black;
      font-size: 20px;
      padding: 20px;
      opacity: 0.8;
    }
    
    #index-section div.index-title-quote h5{
    
      font-family: 'Roboto', sans-serif;
      color: black;
      font-style: italic;
      font-size: 13px;
      opacity: 0.6;
    }
<div id="index-section">
    <div class="index-title-quote">
        <center><h2>"Honour may not win power, but it wins respect. And respect earns power</h2></center>
        <center><h5>- Ishida Mitsunari, legendary samurai</h5></center>
    </div>
</div>

推荐阅读