Прокручиваемый DIV внутри ячейки таблицы - PullRequest
Новая
       23

Прокручиваемый DIV внутри ячейки таблицы

1 голос
/ 26 декабря 2010

Я знаю, мой ответ классический, но я не могу найти правильного решения, ни здесь, ни с помощью Google.Я пытаюсь создать макет с помощью таблицы.Я хочу, чтобы table#layout был на 100% экрана (не более) и #content-td с прокруткой.Мое решение прекрасно работает в FF / Chrome / Safari, но есть некоторые проблемы в IE.Если #content-td имеет height=100% IE установит высоту, равную высоте таблицы (это неправильно, потому что у меня #header).Когда я уберу height=100% из #content-td IE свернет эту продажу.Есть ли решение без javascript, чтобы исправить высоту div? 

<!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>
        <style type="text/css">
            html, body, #layout {height:100%; width:100%; margin:0; padding:0; overflow:hidden;}
            #wrapper {overflow-y:scroll; position:relative; height:100%}
            #content {position:absolute;}
            /* highlight areas */
            #header {background-color:#BADBAD;}
            #sidebar {background-color:#DABDAB;}
            #wrapper {background-color:#CD5C5C; font-size:40px;}
        </style>
    </head>
    <body>
        <table id="layout" border="1" cellpadding="0" cellspacing="0">
            <tr height="1%">
                <td colspan="2" id="header">Header</td>
            </tr>
            <tr valign="top" height="100%">
                <td id="content-td" width="70%" height="100%">
                    <div id="wrapper">
                        <div id="content">
                            Here is long text I want to scroll down<br/>
                            Here is long text I want to scroll down<br/>
                            Here is long text I want to scroll down<br/>
                        </div>
                    </div>
                </td>
                <td id="sidebar" width="30%">Sidebar</td>
            </tr>
        </table>
    </body>
</html>

Работает нормально без doctype, но я хочу действительный документВот тестовая страница .

1 Ответ

0 голосов
/ 26 декабря 2010

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

Похоже, что макет, который вы на самом деле ищете, это то, где основное содержимое прокручивается как обычно, но боковая панель навигации всегда находится в фиксированном положении на экране. Как ни странно, эквивалентное решение вашей проблемы - использовать position:fixed в CSS, чтобы держать навигацию в поле зрения. Например, вы можете создать основной блок контента и блок навигации и использовать что-то вроде этого (протестировано в Firefox): 

body {margin-right:30%;}
#navigation {position:fixed; top:0; right:0; width:30%; height:100%; background:#fcc;}

Если это не то, что вам нужно, укажите ссылку на пример сайта или диаграмму.

...