CSS макет для эмуляции Java Swing BorderLayout - PullRequest
Новая
       4

CSS макет для эмуляции Java Swing BorderLayout

0 голосов
/ 14 апреля 2020

Я пытаюсь создать страницу HTML, которая работает аналогично BorderLayout в библиотеке свингов Java. То есть:

Панель заголовка, которая имеет полную ширину и настолько высока, насколько это необходимо - без прокрутки.

Панель нижнего колонтитула имеет полную ширину и настолько высокую, насколько это необходимо - без прокрутки.

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

Основная панель, занимающая оставшееся пространство (вертикально между верхним и нижним колонтитулом, горизонтально между боковой панелью и краем экрана). Он должен прокручиваться по горизонтали и вертикали, если необходимо.

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

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

Test. css

.body
{
    border: none;
    padding: 0;
}

.header
{
    width:          100%;
}

.footer
{
    width:          100%;
    position:       fixed;
    bottom:         0;
}

.table
{
    width:          100%;
    height:         100%;
}

.main
{
    width:          100%;
    height:         100%;
    vertical-align: top;
    overflow:       scroll;
}    

.side
{
    height:         100%;
    min-width:      fit-content;
    vertical-align: top;
    overflow-y:     scroll;
}  

.nowrap
{
    white-space:    nowrap;
}

Test. html

<!DOCTYPE html>
<html lang="en">

<head >
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="Test.css">
    <title>Page title</title>
</head>

<body>
    <table class="table">
        <tr>
            <td class="header" colspan="2">
                Header - full width, fixed in place, no scrolling.
            </td>
        </tr>
        <tr>
            <td class="main">
                Main panel that should scroll horizontally and vertically.
            </td>
            <td class="side">
                Side panel just as wide
                <br/>
                as it needs to be
                <br/>
                and scroll vertically.
                <form>
                    <span class="nowrap">Prompt: <input type="text" value="123" /></span>
                </form>
            </td>
        </tr>
        <tr>
            <td class="footer" colspan="2">
                Footer - full width, fixed in place, no scrolling.
            </td>
        </tr>
    </table>
</body>
</html>

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

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

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

...