html - 为什么无论内容大小如何，我的 CSS(显然)都会强制显示滚动条？-6ren

html - 为什么无论内容大小如何，我的 CSS(显然)都会强制显示滚动条？

转载作者：行者123 更新时间：2023-11-28 04:26:59

我很抱歉在这里粘贴了很长的代码，但这已经困扰我好几个小时了。我正在努力将我的整个站点移植到一个新模板中，并且我正在尝试使各个区域和事物更加了解大小，以便我可以将它们中的大部分包含在可调整大小的可停靠窗口和事物中，这是一个非常简洁的概念锻炼得很好。不管怎样，我有一个带有外部样式表的页面，我一辈子都弄不明白。无论内容的垂直大小如何，它都会显示一个滚动条，并且底部有 20 像素的额外空白页。我检查了又检查，但我的所有 div 似乎都是独立的，并且唯一真正的奇数位(边缘，涉及负定位)在删除时没有解决问题。

这是我在页面上使用的 HTML(它是动态生成的，这是我登录时的转储)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Objectives</title>
<script type="text/javascript" src="windows/jquery.js"></script>
<link href="windows/windows.css" rel="stylesheet" type="text/css">
<!-- Page Scripts -->

<!-- Generic "always on" scripts -->
<script type="text/javascript">
$(document).ready(function(){
   //Make that backgroud !ugly
   $("body").css("background-color","#000000");
   $("html").css("background-color","#000000");

   //Make all the tags open in new windows. Hee hee hee... good luck there
   $("a").click(function () {
    var url = $(this).attr("href");

    //Build the URL based on a select few modifications.
    if (url.charAt(0) == '?')
        url = "/"+url;

    //Grab the value of action for the string
    var type = url.substr(url.indexOf("action=") + 7);
    if (type.indexOf("&") != -1)
        var type = type.substr(0, type.indexOf("&"));

    parent.spawnNewWindow(url+'&noframe=none', document.title, type);
    return false;
   });

});

</script>

<script language="Javascript" type="text/javascript">
$(document).ready(function(){
    $(".tierPickerShown").click(function () { 
          $(this).parent(".tier").addClass("hideme");
    });
    $(".tierPickerHidden").click(function () { 
          $(this).parent(".tier").removeClass("hideme");
    });
});

</script>

</head>
<body>

    <div class="tier">
        <div class="tierCorner top left"></div>
        <div class="tierCorner top right"></div>
        <div class="tierCorner bottom left"></div>
        <div class="tierCorner bottom right"></div>
        <div class="tierEdgeTop"></div>
        <div class="tierEdgeMiddle"></div>

        <div class="tierEdgeBottom"></div>

        <div class="tierPickerShown"></div><div class="tierPickerHidden"></div>
        <div class="tierMarker"></div>
        <div class="tierTitle">Tier 1</div>
        <div class="tierSpacer"></div>


    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>
        <div class="tierObjective">Choose a Nova and devote your clan to that Nova.</div>

        <div class="tierUnderline"></div>
        <div class="tierReward">+5 Treasure&nbsp;&nbsp;&nbsp;</div>
        <div class="tierSpacer"></div>
    </div>

    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>
        <div class="tierObjective">Win an attack with a mage that has an item equipped.</div>
        <div class="tierUnderline"></div>

        <div class="tierReward">+10 Treasure&nbsp;&nbsp;&nbsp;</div>
        <div class="tierSpacer"></div>
    </div>

    <div class="tierItem">
        <div class="tierCheckbox"></div>
        <div class="tierObjective">Steal at least 2 treasure from another player in a single attack.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward">+10 Treasure&nbsp;&nbsp;&nbsp;</div>

        <div class="tierSpacer"></div>
    </div>

    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>
        <div class="tierObjective">Complete 2 jobs.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward">+25 Treasure&nbsp;&nbsp;&nbsp;</div>
        <div class="tierSpacer"></div>

    </div>

    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>
        <div class="tierObjective">Win an attack on a player who is devoted to a different Nova than you are.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward">+10 Treasure&nbsp;&nbsp;&nbsp;</div>
        <div class="tierSpacer"></div>
    </div>


    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>
        <div class="tierObjective">Become a member of a guild.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward">+15 Treasure&nbsp;&nbsp;&nbsp;</div>
        <div class="tierSpacer"></div>
    </div>

    <div class="tierItem">

        <div class="tierCheckbox"></div>
        <div class="tierObjective">Recruit at least one (1) new player to the game using the Invite system. The player must verify their account to qualify for the objective.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward">+200 Treasure&nbsp;&nbsp;&nbsp;</div>
        <div class="tierSpacer"></div>
    </div>

    </div>

    <div class="tier">

        <div class="tierCorner top left"></div>
        <div class="tierCorner top right"></div>
        <div class="tierCorner bottom left"></div>
        <div class="tierCorner bottom right"></div>
        <div class="tierEdgeTop"></div>
        <div class="tierEdgeMiddle"></div>
        <div class="tierEdgeBottom"></div>

        <div class="tierPickerShown"></div><div class="tierPickerHidden"></div>
        <div class="tierMarker"></div>

        <div class="tierTitle">Tier 2</div>
        <div class="tierSpacer"></div>


    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>
        <div class="tierObjective">Be in first place after 3 days, or attack someone who has joined the Light Team.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward">+10 Treasure&nbsp;&nbsp;&nbsp;Title Awarded: Recruit</div>

        <div class="tierSpacer"></div>
    </div>

    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>
        <div class="tierObjective">Be in second place after 3 days, or attack someone who has joined the Dark Team.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward">+10 Treasure&nbsp;&nbsp;&nbsp;Title Awarded: Recruit</div>

        <div class="tierSpacer"></div>
    </div>

    <div class="tierItem">
        <div class="tierCheckbox"></div>
        <div class="tierObjective">Donate at least 25 Treasure to your Guild</div>
        <div class="tierUnderline"></div>
        <div class="tierReward"></div>
        <div class="tierSpacer"></div>

    </div>

    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>
        <div class="tierObjective">Win an attack on someone between 12 AM and 8 AM.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward"></div>
        <div class="tierSpacer"></div>
    </div>


    <div class="tierItem">
        <div class="tierCheckbox"></div>
        <div class="tierObjective">Steal at least 10 treasure from another player in a single attack.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward"></div>
        <div class="tierSpacer"></div>
    </div>

    <div class="tierItem">

        <div class="tierCheckbox"></div>
        <div class="tierObjective">Win an attack on a player who has at least 5 levels of Defense on each of his Mages at home.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward"></div>
        <div class="tierSpacer"></div>
    </div>

    <div class="tierItem">
        <div class="tierCheckbox tierActiveCheckbox "></div>

        <div class="tierObjective">Win an attack on someone on a Weekend.</div>
        <div class="tierUnderline"></div>
        <div class="tierReward"></div>
        <div class="tierSpacer"></div>
    </div>

    </div>

    <div class="tier">
        <div class="tierCorner top left"></div>

        <div class="tierCorner top right"></div>
        <div class="tierCorner bottom left"></div>
        <div class="tierCorner bottom right"></div>
        <div class="tierEdgeTop"></div>
        <div class="tierEdgeMiddle"></div>
        <div class="tierEdgeBottom"></div>

        <div class="tierPickerShown"></div><div class="tierPickerHidden"></div>
        <div class="tierMarker"></div>
        <div class="tierTitle">Tier 3</div>

        <div class="tierSpacer"></div>


    <div class="tierItem">
        <div class="tierCheckbox"></div>
        <div class="tierObjective">Be the highest ranked [Team] Recruit after 1 week, or win an attack on an enemy Cleric</div>
        <div class="tierUnderline"></div>
        <div class="tierReward">Title Awarded: Cleric</div>
        <div class="tierSpacer"></div>
    </div>


    </div>
    </body>
</html>

这是相应的 CSS 样式表。这是 windows.css:

/* Body information for the windower, to theme the whole thingy. */

@import url('/tier.css');

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF; /* Yes, the same color as the text. jQuery will change this to black for us, so it's a good
                    indicator of any syntax errors in the javascript. */
    color: #DEDEDE;

    /* May be changed later, to be theme-specific */
    font-family: Trebuchet MS, sans-serif;  
    font-weight: bold;
    font-size: 14px;

}

a {
    color: #FFFFFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Windowing Information Here */

/* OMITTED - Doesn't seem relevant, the classes here aren't used */

以及问题代码:tier.css

.tier {
    position: relative;
    width: 90%;
    margin-bottom: 25px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* Classes to describe the shower/hider thing. One class for each state-- hidden and shown. The 
   respective class is shown based on whether or not its parent has the "hideme" class.          */

.tierPickerShown {
    position: relative;
    display: block;
    float: left;
    width: 24px;
    height: 24px;
    margin: 4px;
    z-index: 5;
    background-image: url('images/show_me_shown.png');
}

.tierPickerShown:hover {
    background-image: url('images/show_me_shown_hover.png');
}

.tierPickerHidden {
    position: relative;
    display: none;
    float: left;
    width: 24px;
    height: 24px;
    margin: 4px;
    z-index: 5;
    background-image: url('images/show_me_hidden.png');
}

.tierPickerHidden:hover {
    background-image: url('images/show_me_hidden_hover.png');
}

.tier.hideme .tierPickerShown {
    display: none;
}

.tier.hideme .tierPickerHidden {
    display: block;
}

/* Container for a tier objective. Holds the checkbox and the text elements. */
.tierItem {
    position: relative;
    width: auto;
    z-index: 5;
}

.tier.hideme .tierItem {
    display: none;
}

.tierCheckbox {
    float: left;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    margin-right: 8px;
    background-image: url('images/checkbox.png');
}

.tierActiveCheckbox {
    background-image: url('images/checkbox_checked.png');
}

.tierObjective {
    margin-left: 54px;
    margin-bottom: 3px;
}

.tierUnderline {
    /* this is just WRONG */
    width: 200px;
    height: 2px;
    margin-left: 54px;
    background-color: #000000;
}

.tierReward {
    margin-left: 54px;
    font-size: 0.7em;
}

.tierSpacer {
    /* Empty div, designed to make sure there's some breathing room below the floated content. */
    clear: both;
    width: 100%;
    height: 5px;
}

.tierTitle {
    font-size: 2.0em;
    padding-left: 54px;
    z-index: 5;
}

.tierMarker {
    float: left;
    background-image: url('images/tier_incomplete.png');
    width: 48px;
    height: 32px;
}

.tierMarkerComplete {
    background-image: url('images/tier_complete.png');
}

/* Aesthetics Stuff */

.tierCorner {
    background-image: url('images/tier_round.png');
    width: 9px;
    height: 9px;
    position: absolute; 
}

.tierCorner.top.left {
    top: -9px;
    left: -9px;
    background-position: 0px 0px;
}

.tierCorner.bottom.left {
    bottom: -9px;
    left: -9px;
    background-position: 0px -9px;
}

.tierCorner.top.right {
    top: -9px;
    right: -9px;
    background-position: -9px 0px;
}

.tierCorner.bottom.right {
    bottom: -9px;
    right: -9px;
    background-position: -9px -9px;
}

.tierEdgeMiddle {
    position: absolute;
    left: -9px;
    right: -9px;
    height: 100%;
    background-image: url('images/tier_bg.png');
    z-index: 2;
}

.tierEdgeTop {
    position: absolute;
    width: 100%;
    top: -9px;
    height: 9px;
    background-image: url('images/tier_bg.png');
}

.tierEdgeBottom {
    position: absolute;
    width: 100%;
    bottom: -9px;
    height: 9px;
    background-image: url('images/tier_bg.png');
}

我为半糟糕的 CSS 排列表示歉意，到处都是重复的东西，但我更愿意在进行收缩代码盛宴之前了解是什么让它在正文区域自动滚动条.有没有人看到我在这里失踪的明显明显的东西？我唯一可以对该页面做的事情就是省略 tier.css，这使它看起来很奇怪。

如果你愿意，我已经设置了一个实时版本，这样你就可以看到它应该是什么样子的，图像、滚动条等等，here .

谢谢，如果有人能指出我错过的内容，这会让我多睡几个小时。

最佳答案

将高度 100% 关闭 body windows.css 修复了 Firefox 上的问题，这可能会给你一个开始寻找的地方。

关于html - 为什么无论内容大小如何，我的 CSS(显然)都会强制显示滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/768020/

文章推荐： html - 如何使我的选择器更具体？

文章推荐： c++ - 使用 Howard Hinnant 日期库解析次秒日期

文章推荐： javascript - 为什么我的合并图像 Canvas 不显示？ (ReactJS)

dart - ShadowDom外部的父级的属性已更改(显示:无->显示:flex->显示:无)
我的Angular-Component位于一个flexbox(id =“log”)中。可以显示或隐藏flexbox。我的组件内部有一个可滚动区域，用于显示日志消息。 (id =“message-li
phpinfo() 显示 MySQL，PMA 显示 MariaDB
我真的很困惑有一个 phpinfo() 输出: MySQL 支持启用客户端 API 版本 5.5.40 MYSQL_MODULE_TYPE 外部 phpMyAdmin 显示: 服务器类型:Mar
jquery - 在 jquery 切换中单击时更改按钮文本(显示/隐藏/显示)
我正在研究这个 fiddle : http://jsfiddle.net/cED6c/7/我想让按钮文本在单击时发生变化，我尝试使用以下代码: 但是，它不起作用。我应该如何实现这个？任何帮助都会很棒
php - cakephp 显示 ID 显示 table.name 来自两个不同表的关系
我应该在“dogs_cats”中保存表“dogs”和“cats”各自的ID，当看到数据时显示狗和猫的名字。我有这三个表: CREATE TABLE IF NOT EXISTS cats ( id
php - 使用 Blade 显示 HTML 显示 HTML 代码
我有一个字符串返回到我的 View 之一，如下所示: $text = 'Lorem ipsum dolor ' 我正在尝试用 Blade 显示它: {{$text}} 但是，输出是原始字符串而不是渲染
jquery - 使用 JQuery 显示/隐藏隐藏/显示 div，但单击按钮没有效果
我无法让我的链接(由图像表示，位于页面左侧)真正有效地显示一个 div(包含一个句子，位于中间)/单击链接时隐藏。这是我的代码: Practice
javascript - 显示 image1 的脚本，然后(随机毫秒)显示 image2 并停止
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
c# - ListView 显示 4 条记录。 DataGridView 显示 3 条记录？
最初我使用 Listview 来显示 oracle 结果，但是最近我不得不切换到 datagridview 来处理比 Listview 允许的更多的结果。然而，自从切换到数据网格后，我得到的结果越来越
xml - 如何使用 Apache fop 显示 Unicode 字符？显示 "?"而不是字符。
我一直在尝试插入一个 Unicode 字符 ∇ 或 ▽，所以它显示在 Apache FOP 生成的 PDF 中。这是我到目前为止所做的: 根据这个基本帮助 Apache XSL-FO Input，您
node.js - pm2 显示 1.2GB 而 heapdump 显示 80MB
我正在使用 node v0.12.7 编写一个 nodeJS 应用程序。我正在使用 pm2 v0.14.7 运行我的 nodejs 应用程序。我的应用程序似乎有内存泄漏，因为它从我启动时的大约 1
jquery - 如果 x 显示 x 如果 y 显示 y(我知道这个标题不好)
好的，所以我有一些 jQuery 代码，如果从下拉菜单中选择了带有前缀 Blue 的项目，它会显示一个输入框。代码: $(function() { $('#text1').hide();
google-chrome - Chrome 中的“检查元素”显示 LESS，但 Firefox 显示 CSS
当我试图检查 Chrome 中的 html 元素时，它显示的是 LESS 文件，而 Firefox 显示的是 CSS 文件。 (我正在使用 Bootstrap 框架) 如何在 Chrome 中查看 c
python - Microsoft Bot Emulator 显示 "sending failed. Retry"。 VSCode 显示 KeyError : 'HTTP_CONTEXT_TYPE'
我是 Microsoft Bot Framework 的新手，我正在通过 youtube 视频 https://youtu.be/ynG6Muox81o 学习它并在 Ubuntu 上使用 python
encoding - notepad++ 显示 ucs-2LE 而 ubuntu FILE [file] 显示 UTF-16LE，我很困惑？
我正在尝试转换从 mssql 生成的文件到 utf-8。当我打开他的输出 mssql在 Windows Server 2003 中使用 notepad++ 将文件识别为 UCS-2LE我使用 file
javascript帮助日期/显示
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jQuery点击关闭div(显示)
我正在尝试执行单击以打开/关闭一个 div 的功能。这是基本的，但是，点击只显示 div，当我点击“关闭”时，没有任何反应。 $(".inscricao-email").click(function
flutter - 显示/隐藏小部件而不重新创建它
假设我有 2 张卡片，屏幕上一次显示一张。我有一个按钮可以用其他卡片替换当前卡片。现在假设卡 1 上有一些数据，卡 2 上有一些数据，我不想破坏它们每个上的数据，或者我不想再次重建它们中的任何一个。
javascript - 显示()未定义
我正在使用 Eloquent Javascript 学习 Javascript。我在 Firefox 控制台上编写了以下代码，但它返回:“ReferenceError:show() 未定义”为什么？
symfony - 显示/隐藏某些菜单取决于奏鸣曲管理员角色
我正在使用 Symfony2 开发一个 web 项目，我使用 Sonata Admin 作为管理面板，一切正常，但我想要做的是，在 Sonata Admin 的仪表板菜单上，我需要显示隐藏一些菜单取决
angularjs - 显示/隐藏div取决于AngularJS中的下拉列表选择
我试图显示一个div，具体取决于从下拉列表中选择的内容。例如，如果用户从列表中选择“现金”显示现金div或用户从列表中选择“检查”显示现金div 我整理了样本，但样本不完整，需要接线 http://j

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 为什么无论内容大小如何，我的 CSS(显然)都会强制显示滚动条？