为什么我的CSS（显着）强制滚动条出现而不管内容大小？

时间：2009-04-20 12:17:56

标签： html css layout

我为这里长长的代码粘贴道歉，但这已经困扰了我好几个小时了。我正在努力将我的整个网站移植到一个新模板中，并且我正在努力使各种区域和事物更具尺寸意识，因此我可以将其中大部分包含在可调整大小的可停靠窗口和事物中，这是一个非常简洁的概念。锻炼得很好。无论如何，我有一页外部样式表，我无法理解为我的生活。无论内容的垂直大小如何，它都会显示一个滚动条，底部会显示20px的额外空白页面。我已经检查并重新检查了，但是我的所有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，这使得它看起来更像是craptastic。

如果您愿意，我会设置一个实时版本，以便您可以看到它应该是什么样子，图片，滚动条和所有内容，here。

谢谢，如果有人能指出我错过的东西，这将让我有几个小时的睡眠时间。

5 个答案:

答案 0 :(得分：4)

从身体的高度100％关闭windows.css解决了Firefox上的问题，这可能会让你有机会开始寻找。

答案 1 :(得分：2)

如果其他人偶然发现了这一点：我做了一个溢出：隐藏在我的页面主体上，当浮动div神秘地导致滚动条出现时。如果您确定观看者将在与您相同大小的窗口中查看您的页面，那么您只能这样做。

答案 2 :(得分：1)

我更喜欢使用安装了Firebug插件的Firefox，而不是尝试理解样式表jumble和html。 Firebug允许您检查页面元素，并显示应用于该元素的样式。您还可以动态更改样式以查看它如何影响布局。

答案 3 :(得分：1)

我想我已经弄明白了，虽然它仍然没有任何意义。 .tier类包含各个层组（并且是唯一的直接后代）具有20px的margin-top。删除它还会删除页面底部的重影空间，使滚动条死亡。然而，它也推动我的层次超过页面的顶部，所以我使用垫片补偿了这一点。我不喜欢它，但这是我能够让它工作的唯一方式，看起来我想要它。

我无法解释为什么margin-top在容器区域底部产生额外空间，在这种情况下是身体。也许这是一个渲染错误？奇怪的是，这将是所有实现中的错误。如果有人能够对这个特定修复工作的原因有所了解，那将是最有帮助的。

答案 4 :(得分：0)

您的代码是'divitis'的典型示例，并且比它需要的复杂得多：所有内容都是div并且使用太多类 - 这使得在出现问题时更难调试（即使使用Firebug / WDT）像这样出现。

有时，只是简化页面就足以让奇怪的古怪行为消失，所以这始终是我推荐的第一件事。这是一个（非常快速的）一些更好的代码示例 它可能不适合你想要的东西，但它是一个更好的基础，而不是使用div来做所有事情。

<!DOCTYPE html>
<html>
<head>
    <title>Objectives</title>

    <style type="text/css">
        * {margin:0;border-width:0;padding:0;}

        html
        {
            background: black;
            color:#DEDEDE;
            font: 14px Trebuchet MS bold;
        }

        .tier
        {
            width: 90%;
            margin: 20px auto 25px;
            padding: 0.5em;

            background: #404040;
            border-radius: 9px;
            -moz-border-radius: 9px;
            -webkit-border-radius: 9px;
        }

        .tier .picker
        {
            background: none;
            float: left; clear: left;
        }

        .tier h2
        {
            font-size: 2em;
            padding-left: 54px;
            margin: 0.1em 0;
        }

        .tier ul
        {
            list-style: none;
        }

        .tier ul li
        {
            margin-bottom: 5px;
        }

        .tier ul li .checkbox
        {
            width: 32px;
            height: 32px;
            margin: 0 8px;

            float: left; clear: left;
        }

        .tier ul li p
        {
            float: none; clear: right;
            margin-left: 48px;
        }

        .tier ul li p.reward
        {
            font-size: 0.7em;

            width: 200px;
            border-top: solid 2px black;
            margin-top: 4px;
        }

        .tier ul li p.reward .title
        {
            margin-left: 2em;
        }
    </style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $j = jQuery.noConflict();

        $j(document).ready(init);

        function init()
        {
            $j('.picker').toggle
            (
                function()
                {
                    $j(this).siblings('ul').hide();
                    $j(this).children('img').attr('src','images/show_me_hidden.png').attr('alt','>');
                }
            ,
                function()
                {
                    $j(this).siblings('ul').show();
                    $j(this).children('img').attr('src','images/show_me_shown.png').attr('alt','v');
                }
            );
        }

    </script>
</head>
<body>
    <h1>Objectives</h1>


    <div class="tier">

        <button type="button" class="picker">
            <img src="images/show_me_shown.png" alt="v" />
        </button>

        <h2>Tier 1</h2>
        <ul>
            <li>
                <img class="checkbox" src="images/checkbox_checked.png" alt="*" title="Completed" />
                <p class="objective">Choose a Nova and devote your clan to that Nova.</p>
                <p class="reward">+5 Treasure</p>
            </li>
            <li>
                <img class="checkbox" src="images/checkbox_checked.png" alt="*" title="Completed" />
                <p class="objective">Win an attack with a mage that has an item equipped.</p>
                <p class="reward">+10 Treasure</p>
            </li>
            <li>
                <img class="checkbox" src="images/checkbox.png" alt=" " title="Uncompleted" />
                <p class="objective">Steal at least 2 treasure from another player in a single attack.</p>
                <p class="reward">+10 Treasure</p>
            </li>
        </ul>
    </div>

    <div class="tier">

        <button type="button" class="picker">
            <img src="images/show_me_shown.png" alt="v" />
        </button>

        <h2>Tier 2</h2>
        <ul>
            <li>
                <img class="checkbox" src="images/checkbox_checked.png" alt="*" title="Completed" />
                <p class="objective">Be in first place after 3 days, or attack someone who has joined the Light Team.</p>
                <p class="reward">+10 Treasure <span class="title">Title Awarded: Recruit</span></p>
            </li>
        </ul>
    </div>

</body>
</html>
相关问题
最新问题