css - 页面底部巨大的空白-6ren

css - 页面底部巨大的空白

转载作者：行者123 更新时间：2023-11-28 00:19:58

27

4

我的页面底部有大量空白区域。我不知道为什么。我试过调整图像和主体的边距和填充，空白区域没有变小。我的代码非常幼稚。我看不出是什么导致了大量的空白。我只有一个图像元素和四个段落元素。我猜它与 CSS 中的 position 属性有关。我不知道。我已经为此工作了三天。请帮忙。

body {
color: #555;
}

img {
width: 100%;
height: 100%;
/*z-index:					0;*/
display: inline-block;
}

.tint {
position: relative;
box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
}

.wrap {
overflow: hidden;
margin: 0 auto;
}

.tint:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
transition: all .3s linear;
}

.tint:hover:before {
background: none;
}


.enter {
font-size: 24px;
/*z-index:					1;*/
color: white;
position: relative;
left: 58em;
top: -6em;
}

.week {
font-size: 20px;
font-family: Arial;
/*z-index:					2;*/
color: white;
top: -28.7em;
left: 7.4em;
position: relative;
}

#line {
position: relative;
/*z-index:					1;*/
color: white;
width: 10%;
left: -33em;
top: -37em;
}

.team {
position: relative;
font-size: 38px;
color: white;
top: -18em;
left: 4em;
font-family: Adobe Fan Heiti Std;
}

.percent {
position: relative;
font-size: 92px;
font-family: Arial;
top: -8.5em;
left: 2em;
color: white;
}

   <!DOCTYPE html>
        <html>
          <head>
            <title>Second Page</title>
            <meta charset="utf-8">
        	<link rel="stylesheet" type="text/css" media="screen" href="pageTwo.css">
          </head>
          <body>
            <div class="wrap">
              <img src="think-og-image.jpg" alt="think" class="tint">
        	</div>
        	  <p class="week">This Week</p>
        	  <hr id="line">
        	  <p class="enter">Enter</p>
        	  <p class="team">Team Engagement</p>
        	  <p class="percent">67%</p>
          </body>
        </html>

最佳答案

position:relative 导致了问题。而不是将 position 赋予所有 p 元素，我将它们放在 div 中，并使用 banner-content css 和将 position:absolute 赋给 banner-content。并相应地对齐它。希望这可以帮助。谢谢

body {
    color: #555;
}

img {
    width: 100%;
    height: 100%;
    display: inline-block;
}

.tint {
    position: relative;
    box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
}

.wrap {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.tint:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 255, 0.5);
    transition: all .3s linear;
}

.tint:hover:before {
    background: none;
}


.enter {
    font-size: 24px;
    color: white;
}

.week {
    font-size: 20px;
    font-family: Arial;
    color: white;
}

#line {
    color: white;
    width: 10%;
}

.team {
    font-size: 38px;
    color: white;
    font-family: Adobe Fan Heiti Std;
}

.percent {
    font-size: 92px;
    font-family: Arial;
    color: white;
}

.banner-content{
    position:absolute;
    top:0;
    width: 100%;
    text-align: center;
}
}

<!DOCTYPE html>
    <html>
      <head>
        <title>Second Page</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="pageTwo.css">
      </head>
      <body>
        <div class="wrap">
          <img src="https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="think" class="tint">
          
          <div class="banner-content">
          <p class="week">This Week</p>
          <hr id="line">
          <p class="enter">Enter</p>
          <p class="team">Team Engagement</p>
          <p class="percent">67%</p>
          </div>
        </div>
          
      </body>
    </html>

关于css - 页面底部巨大的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54918502/

27

4

0

文章推荐： html - 使文本完全出现在 div 中

文章推荐： css - 未从 JSP 内部连接到 CSS

文章推荐： javascript - 使用 Angular 将数组从模板绑定(bind)到 Controller

javascript - 只显示一个段落......不管是否有更多，空白，空白，类......只有并且只有CSS
我正在寻找 css 属性以隐藏带或不带 css 类的段落，如果它包含空格 ( ) 或空白，但我想至少保留一个带或不带的段落，如果有更多的话。隐藏段落，如果它是空白的或包含 white-space(
ruby 空白
在 ruby 中对空白有不同的敏感度/设置吗？我有一个 RoR 项目，其中一个事件记录调用有很多组件: max_stuff = FooSummary.select("max(stuff)
数字后和文本前的 LaTeX 空白
如何在脚注中的数字后留空？一般来说，对于所有脚注! 例子: 好 : 1 Hello World 坏:1Hello World 最佳答案正确答案是不要重新定义\thefootnote ，因为这会在脚
javascript - 数组未设置回 [] (空白)
我有这段代码，每次第一个 for 循环再次开始时，我希望它将数组重置为空白，因为它正在使用新用户，但我得到的输出包含一个数组中的所有值。 var items = []; for (var i
php - Cakephp生成xml错误-空白
我试图在CakePHP中生成一个动态xml文档，以输出到浏览器。这是我的 Controller 代码: Configure::write ('debug', 0); $this->layout =
Ansible strip 空白
当我尝试在 nxos 设备上运行某些命令时，输出末尾有一个空格。我必须将输出与现有变量列表进行比较。末尾的空格导致比较错误。如何在字符串列表中使用 .strip() 函数？ - name: Curre
elasticsearch搜索查询返回 "hits"空白
我对 Elasticsearch 相当陌生，我一直在尝试对我的数据进行搜索，并且总是让点击部分为空。即使在数据上传和索引之后也会发生这种情况。我的映射如下: { "mappings":{
firefox - Firefox插件更改关于:空白
我想将about:blank页面更改为firefox插件首页页面的url。如何更改默认的新标签页网址或可以为新标签页提供默认网址？我正在使用Firefox附加SDK。最佳答案您可以结合使用Ta
R - 根据同一行不同列的值填充缺失值(空白)
我正在使用 R 并具有以下数据框示例，其中所有变量都是因子: first second third social birth control high
jquery 空白/灰色显示对话框的页面
如何清空显示对话框的页面。下面是我的代码HTML: .ui-dialog, .ui-dialog-content { border:1px solid #cde68c; border-botto
c - 尝试输出此函数时我什么也没得到\空白
更新“他的问题是要求我只运行一次 str ，他们已经告诉我该函数只需要一个参数)” 我试图返回第一个不重复的字符，例如:“blazqnqbla”->第一个不重复的字符是“z”，因此函数需要返回z。现在
php - 无法检查登录错误(空白)
我的登录验证有问题。问题是当我尝试使用管理员登录时，页面停止在 checklogin.php 上并且不会告诉它是否成功。这是我的代码。索引.html Aplik
MYSQL 查询以检查值是否为空/空白
我的查询是这样的 SELECT Distinct tm.teamid,tm.Team_Name,CONCAT_WS(' ',tu.FirstName+' '+tu.LastName) as Leade
javascript - 查询字符串错误。空白
我正在创建指向页面的超链接 url 由用户输入决定，因此由查询字符串决定 ; 问题是变量状态由两个或多个单词组成。因此，当我尝试单击证明表单中输入的超链接时，仅获取状态变量的第一个单词。浏览器将另一个
jquery scrolltofixed 空白
该问题在每个浏览器中的表现都不同，例如在 Firefox 中大约一个空格如果您再次滚动到顶部，则会出现具有相同高度的滚动框。在 chrome 中，滚动时框会变得狭窄等等...... 使用的调用是:
菜单之间的 CSS 空白
我对菜单栏文字之间的 CSS 空白有疑问。我尝试了很多方法，但仍然无法解决。有人可以帮我吗？菜单问题图片如下: http://imageshack.us/photo/my-images/201/44
html - 空白/有文本时插入符号在文本区域中的不同位置
我对有疑问.其中的插入符根据是否为空具有不同的垂直位置: 我的代码: textarea { padding: 0 5px; border: none; outline: n
html - 输入代码中的返回行导致输出中元素之间的间隙/空白？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Ignore whitespace in HTML 我想在网页上将图片并排放置。这是我的 HTML:
html - 检查元素不工作/空白
每当我尝试检查元素时，什么都没有出现。我在使用 Chrome。我明白了 Elements | Network | Sources | Timeline | Profiles | Resources |
css - 是什么导致了这个双滚动条/空白？
我在使用 Chrome、Firefox 和 IE 时遇到了一个奇怪的问题。我正在为我的投资组合网站/博客构建一个 WordPress 主题，一切都很好，直到今天，当我在 chrome 中查看该网站时，

首页

博学

6Ren·AI

商城

css - 页面底部巨大的空白