CSS div / overflow: почему первый файл HTML работает, а не второй? - PullRequest
Новая
       22

CSS div / overflow: почему первый файл HTML работает, а не второй?

0 голосов
/ 30 марта 2010

Обратите внимание, как работает первый HTML / CSS при горизонтальном изменении размера браузера. Он будет уменьшаться не более чем на 800 пикселей, но будет увеличиваться по мере перетаскивания правого края браузера. Он также будет корректно переполнять таблицу сверху и прокручивать ее по горизонтали.

В первом фрагменте кода мне не нравится то, где находится полоса прокрутки. Я хочу, чтобы он отображался в границах набора полей, поэтому даже если я сузу браузер до ширины 800 пикселей, я смогу видеть как левую, так и правую стороны границы набора полей.

Второй фрагмент кода точно такой же, как и первый, за исключением того, что я добавил еще один тег div к миксу внутри набора полей и вокруг сетки. Обратите внимание, что ширина верхнего набора полей не будет правильно уменьшаться, когда вы уменьшаете область просмотра вашего браузера. Любые идеи о том, почему это не работает, что я могу сделать, чтобы заставить его работать как первый фрагмент кода?

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

Я довольно новичок в макетах CSS и HTML, поэтому мое понимание того, почему CSS обрабатывает размеры так же, как в некоторых ситуациях, все еще действительно меня смущает.

Рабочий HTML-файл: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"></meta>

    <style type="text/css">
        #divBody {
            margin-top: 5px;
            top:24px;
            margin-top: 10px;
        }            
        #divContainer 
        {
            top: 5px;
            position:relative;
            min-height:100%;
            #width:expression(document.body.clientWidth < 830? "800": "90%" );
            width:90%;
            min-width: 800px;
            padding-bottom:70px;
        }
        #divMasterGrid {
            position:relative;
            margin:5px;
            top:5px;
            width:99%;
            margin:0 auto;
            overflow-x:scroll;
        }
        #divRadioButtonArea {
            position:relative;
            top:20px;
            height:51px;
            font-size: 12px;
            width:99%;
            margin:5px;
        }
    </style>
    <title>TEST TEST</title>
</head>


<body id="divBody">
    <div id="divContainer" class="gridRegion">

        <div id="divMasterGrid">
            <fieldset style="margin: 5px;">
                <legend style="font-size: 12px; color: #000;">Numbers</legend>
                <table border="1px">
                <tr>
                    <td>One
                    </td>
                    <td>Two
                    </td>
                    <td>Three
                    </td>
                    <td>Fout
                    </td>
                    <td>Five
                    </td>
                    <td>Six
                    </td>
                    <td>Seven
                    </td>
                    <td>Eight
                    </td>
                    <td>Nine
                    </td>
                    <td>Ten
                    </td>
                    <td>Eleven
                    </td>
                    <td>Twelve
                    </td>
                    <td>Thirteen
                    </td>
                    <td>Fourteen
                    </td>
                    <td>Fifteen
                    </td>
                    <td>Sixteen
                    </td>
                    <td>Seventeen
                    </td>
                    <td>Eighteen
                    </td>
                    <td>Nineteen
                    </td>
                    <td>Twenty
                    </td>                        
                </tr>
                </table>
            </fieldset>
        </div>


        <div id="divRadioButtonArea">
            <fieldset style=" padding-left: 5px;">
                <legend style="color: #000;  height:auto">Colors</legend>
                <table style="width:100%;padding-left:5%;padding-right:5%;">
                    <tr>
                        <td>
                            <input type="radio" name="A" value="Y"/><label>Red</label>
                        </td>
                        <td>
                            <input type="radio" name="O" value="O"/><label>White</label>
                        </td>
                        <td>
                            <input type="radio" name="W"/><label>Blue</label>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>

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

Разбитый HTML-файл: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"></meta>
    <style type="text/css">
        #divBody {
            margin-top: 5px;
            top:24px;
            margin-top: 10px;
        }            
        #divContainer 
        {
            top: 5px;
            position:relative;
            min-height:100%;
            #width:expression(document.body.clientWidth < 830? "800": "90%" );
            width:90%;
            min-width: 800px;
            padding-bottom:70px;
        }
        #divTopFieldSet {
            position:relative;
            margin:5px;
            top:5px;
            width:99%;
        }
        #divRadioButtonArea {
            position:relative;
            top:20px;
            height:51px;
            font-size: 12px;
            width:99%;
            margin:5px;
        }
        #divTable {
            position:relative;
            width:99%;
            margin:5px auto;
            overflow-x:scroll;
        }

    </style>
    <title>TEST TEST</title>
</head>


<body id="divBody">
    <div id="divContainer" class="gridRegion">

        <div id="divTopFieldSet">
            <fieldset style="margin: 5px;">
                <legend style="font-size: 12px; color: #000;">Numbers</legend>
                <div id="divTable">
                    <table border="1px">
                    <tr>
                        <td>One
                        </td>
                        <td>Two
                        </td>
                        <td>Three
                        </td>
                        <td>Fout
                        </td>
                        <td>Five
                        </td>
                        <td>Six
                        </td>
                        <td>Seven
                        </td>
                        <td>Eight
                        </td>
                        <td>Nine
                        </td>
                        <td>Ten
                        </td>
                        <td>Eleven
                        </td>
                        <td>Twelve
                        </td>
                        <td>Thirteen
                        </td>
                        <td>Fourteen
                        </td>
                        <td>Fifteen
                        </td>
                        <td>Sixteen
                        </td>
                        <td>Seventeen
                        </td>
                        <td>Eighteen
                        </td>
                        <td>Nineteen
                        </td>
                        <td>Twenty
                        </td>                        
                    </tr>
                    </table>
                </div>
            </fieldset>
        </div>


        <div id="divRadioButtonArea">
            <fieldset style=" padding-left: 5px;">
                <legend style="color: #000;  height:auto">Colors</legend>
                <table style="width:100%;padding-left:5%;padding-right:5%;">
                    <tr>
                        <td>
                            <input type="radio" name="A" value="Y"/><label>Red</label>
                        </td>
                        <td>
                            <input type="radio" name="O" value="O"/><label>White</label>
                        </td>
                        <td>
                            <input type="radio" name="W"/><label>Blue</label>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>

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

1 Ответ

0 голосов
/ 31 марта 2010

Надеюсь, это то, что вы имеете в виду:

Я переместил правила overflow-x и width в #divTopFieldSet - содержимое div правильно прокручивается, когда тело становится слишком узким, чтобы содержать таблицу.

Честно говоря, я не на 100% уверен в первопричине этого. Когда элемент с шириной в процентах установлен на переполнение: прокрутка, он не сжимается автоматически, чтобы обрезать его содержимое - кажется, что дети элемента играют роль. Поскольку таблица имеет собственную минимальную ширину (определяемую содержимым ячеек), окружающий контейнер не будет сжиматься за пределами внешнего края таблицы. Кроме того, есть вычисление в процентах ширины - width:99%; означает «99% ширины родительского контейнера» - если родительский контейнер не основан на размере области просмотра, то 99% не изменится, когда Вы также изменяете размер.

Применение правила переполнения к контейнеру вверх по дереву (divTopFieldSet), тем не менее, работает. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"></meta>
    <style type="text/css">
        #divBody {
            margin-top: 5px;
            top:24px;
            margin-top: 10px;
        }            
        #divContainer 
        {
            top: 5px;
            position:relative;
            min-height:100%;
            #width:expression(document.body.clientWidth < 830? "800": "90%" );
            width:90%;
            min-width: 800px;
            padding-bottom:70px;
        }
        #divTopFieldSet {
            position:relative;
            margin:5px;
            top:5px;
            width:99%;
            overflow-x:scroll;
        }
        #divRadioButtonArea {
            position:relative;
            top:20px;
            height:51px;
            font-size: 12px;
            width:99%;
            margin:5px;
        }
        #divTable {
            margin:5px auto;
        }

    </style>
    <title>TEST TEST</title>
</head>


<body id="divBody">
    <div id="divContainer" class="gridRegion">

        <div id="divTopFieldSet">
            <fieldset style="margin: 5px;">
                <legend style="font-size: 12px; color: #000;">Numbers</legend>
                <div id="divTable">
                    <table border="1px">
                    <tr>
                        <td>One
                        </td>
                        <td>Two
                        </td>
                        <td>Three
                        </td>
                        <td>Fout
                        </td>
                        <td>Five
                        </td>
                        <td>Six
                        </td>
                        <td>Seven
                        </td>
                        <td>Eight
                        </td>
                        <td>Nine
                        </td>
                        <td>Ten
                        </td>
                        <td>Eleven
                        </td>
                        <td>Twelve
                        </td>
                        <td>Thirteen
                        </td>
                        <td>Fourteen
                        </td>
                        <td>Fifteen
                        </td>
                        <td>Sixteen
                        </td>
                        <td>Seventeen
                        </td>
                        <td>Eighteen
                        </td>
                        <td>Nineteen
                        </td>
                        <td>Twenty
                        </td>                        
                    </tr>
                    </table>
                </div>
            </fieldset>
        </div>


        <div id="divRadioButtonArea">
            <fieldset style=" padding-left: 5px;">
                <legend style="color: #000;  height:auto">Colors</legend>
                <table style="width:100%;padding-left:5%;padding-right:5%;">
                    <tr>
                        <td>
                            <input type="radio" name="A" value="Y"/><label>Red</label>
                        </td>
                        <td>
                            <input type="radio" name="O" value="O"/><label>White</label>
                        </td>
                        <td>
                            <input type="radio" name="W"/><label>Blue</label>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>

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

Дайте нам знать, если это не то, что вам нужно ...

...