Полноэкранный макет - PullRequest
Новая
       23

Полноэкранный макет

0 голосов
/ 10 июня 2009

Проблемы с полноэкранным макетом. Будем признательны за решение на основе таблицы или CSS.

Цель состоит в том, чтобы перейти к экрану просмотра с фиксированной шириной «nav» и фиксированной высотой «top», в идеале без JavaScript. Код ниже работает до тех пор, пока «содержимое» не заполнится. Когда это произойдет, нужно прокрутить. Однако переполнение на тд не работает. Ни один не делает оборачивание вокруг div с переполнением. Я думаю, что это связано с автоматическим расширением таблиц в соответствии с содержимым div. Тем не менее, поскольку div содержимого должен растягиваться до экрана, он не может иметь фиксированную высоту. 

    <table style="width: 100%; background: blue; height: 100%">
        <tr>
            <td id="nav" style="width: 200px; background: yellow"></td>

            <td style="background: green">
                <table style="width: 100%; height: 100%; background: purple">
                    <tr>
                        <td id="top" style="height: 200px; background: orange"></td>
                    </tr>
                    <tr>
                        <td id="content" style="background: gray; overflow-y: auto">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>

Ответы [ 3 ]

0 голосов
/ 10 июня 2009

Да, у меня была эта проблема с Firefox в частности. Safari делает это довольно хорошо (в том числе с минимальной высотой), но все другие браузеры не могут это сделать.

Способ, которым я смог это сделать, - принудительно загрузить указанную высоту px и при обновлении, используя, да, Javascript. Трудно сделать это кроссплатформенным без него.

0 голосов
/ 10 июня 2009

Вы действительно не должны пытаться макетировать с использованием таблиц.

Вот код, который я взбил для получения 100% высоты без таблиц: 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css"> 
    <style type="text/css">
        #wrapper {
            height: 100%;
            width: 100%;
        }
        #column1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            overflow: hidden;
        }
        #column2 {
            position: absolute;
            top: 0;
            left: 200px;
            height: 100%;
            overflow: hidden;
        }
        #row1 {
            height: 200px;
            overflow: hidden;
        }
        #row2 {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="column1" style="background-color: yellow;">
            bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah 
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
        </div>
        <div id="column2">
            <div id="row1" style="background-color: orange;">
                bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            </div>
            <div id="row2" style="background-color: grey;">
                bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah 
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            </div>
        </div>
    </div>
</body>
</html>
0 голосов
/ 10 июня 2009

Я обнаружил, что эта компоновка css , частично названная «липким нижним колонтитулом», была лучшей версткой, она проста и легко расширяется или сокращается в зависимости от вашего контента.

...