Почему мой CSS (очевидно) заставляет полосу прокрутки появляться независимо от размера контента? - PullRequest
Новая
       14

Почему мой CSS (очевидно) заставляет полосу прокрутки появляться независимо от размера контента?

1 голос
/ 20 апреля 2009

Я прошу прощения за долгую вставку кода здесь, но это беспокоило меня уже несколько часов. Я работаю над переносом всего сайта в новый шаблон, и я пытаюсь сделать различные области и вещи более ориентированными на размер, чтобы я мог вместить большинство из них в изменяемые размеры закрепляемых окон и вещей, очень аккуратная концепция, которая работает очень хорошо. Во всяком случае, у меня есть одна страница с внешней таблицей стилей, которую я не могу понять на всю жизнь. Независимо от размера содержимого по вертикали, он показывает полосу прокрутки и 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, что в любом случае делает его довольно притягательным.

Если хотите, я настроил живую версию, чтобы вы могли видеть, как она должна выглядеть, изображения, полосу прокрутки и все, здесь .

Спасибо, это вернет меня на несколько часов назад, если кто-то сможет указать, что я пропустил.

Ответы [ 5 ]

4 голосов
/ 20 апреля 2009

Снятие высоты на 100% с тела windows.css устраняет проблему в Firefox, которая может дать вам место для поиска.

2 голосов
/ 29 декабря 2012

На случай, если кто-нибудь еще наткнется на это: я переполнил: скрытый в теле моей страницы, когда плавающие div-ы таинственно вызывали появление полосы прокрутки. Конечно, вы можете сделать это только в том случае, если вы уверены, что зрители будут смотреть на вашу страницу в том же окне, что и вы.

1 голос
/ 21 апреля 2009

Я думаю, что я понял это, хотя это все еще не имеет никакого смысла. Класс .tier, который охватывает отдельные группы уровней (и является единственным прямым потомком тела), имеет отступ в 20 пикселей. Удаление этого также удаляет призрачное пространство внизу страницы, заставляя полосу прокрутки умирать. Тем не менее, это также выдвигает мои уровни за верхнюю часть страницы, поэтому я компенсировал это с помощью проставки. Мне это не нравится, но это был единственный способ заставить его работать и выглядеть так, как я этого хотел.

Я не могу объяснить, почему margin-top создавал дополнительное пространство в нижней части области контейнера, в данном случае body. Возможно, это ошибка рендеринга? Странно, что это было бы ошибкой во всех реализациях. Если бы кто-нибудь мог пролить свет на понимание того, почему именно это исправление работает, это было бы очень полезно.

1 голос
/ 20 апреля 2009

Вместо того, чтобы пытаться разобраться в путанице таблиц стилей и html, я предпочитаю использовать Firefox с установленным плагином Firebug. Firebug позволяет вам проверять элементы страницы и показывает, какие стили были применены к этому элементу. Вы также можете динамически изменять стили, чтобы увидеть, как это влияет на макет.

0 голосов
/ 20 апреля 2009

Ваш код является классическим примером «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>
...