Я вынужден использовать вложенные таблицы для макета для масштабирования текстовой области? (Пример HTML включен) - PullRequest
Новая
       6

Я вынужден использовать вложенные таблицы для макета для масштабирования текстовой области? (Пример HTML включен)

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

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

Следующий код работает, как и предполагалось, в Firefox и т. Е. (В режиме quircks)
standard, т.е. не может изменить размер высоты текстовой области.
Я не возражаю против некоторых нестандартных размышлений, это не обязательно должны быть таблицы div или что-то еще, пока он выполняет свою работу.
Я знаю, что javascript может выполнять некоторые расчеты по разрешению, но это решение кажется слишком сложным для простой разметки. Чем проще и меньше код, тем лучше imo. 

<!DOCTYPE html>
<html>
<body>
<table style="width: 100%">
<tr>
    <td style="width: 300px">
        <table class="clsDataGrid" width="100%" height="350px">
            <tr style="height:350px;background-color:blue;">
                <td style="height:350px">test</td>
            </tr>
        </table>
        <br/>      
        <table width="100%">
           <tr>
                <td style="background-color:red;height:100px">test</td>
            </tr>
        </table>
    </td>

    <td style="padding-left : 1em;height: 100%">
        <table class="clsDataGrid" style="width: 100%;height: 100%">
            <tr>
                <th>Description</th>
            </tr>
            <tr>
                <td style="height: 100%">
                    <textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
                </td>
            </tr>
        </table>
    </td> 
    </tr>
</table>
</body>
</html>

1 Ответ

1 голос
/ 30 марта 2012

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

<!--Solution 3-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    body {padding:0; margin:0;}
    table td {vertical-align: top;}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height:350px; background-color:blue; color:white; padding:0 24px;">
            Blue Test
        </td>
        <td rowspan="2" style="padding:31px 24px 0; position:relative; height:100%">
                <label style="position:absolute; top:0; left:24px;">Description</label>
                <textarea style="resize: none; width:100%; height:100%;">DATAAAAA</textarea>
        </td>
    </tr>
    <tr>
        <td style="height:100px; background-color:red; color:white; padding:0 24px;">
            Red Test
        </td>
    </tr>
</table>
</body>
</html>

Как и во всем этом, есть куча решений - вот двау меня в голове - место для вас, чтобы начать - я не тестировал кросс-браузер.

Надеюсь, они помогут. 

<!--Solution 1-->
<!DOCTYPE html>
<html>
<body>
<div style="display:table; width:100%">
    <div style="display:table-cell; width:30%;">
        <div style="height:350px; background-color:blue; color:white; padding:0 24px;">
            Blue Test
        </div>
        <div style="height:100px; background-color:red; color:white; padding:0 24px;">
            Red Test
        </div>
    </div>
    <div style="display:table-cell; vertical-align:middle">
        <div style="padding:0 24px;">
            <span>Description</span>
            <textarea style="resize: none; width:100%;height: 100%">DATAAAAA</textarea>
        </div>
    </div>
</div>
</body>
</html>

<!--Solution 2-->
<!DOCTYPE html>
<html>
<body>
<div style="width:100%">
    <div style="display:inline-block; width:30%;">
        <div style="height:350px; background-color:blue;">
            Blue Test
        </div>
        <div style="height:100px; background-color:red;">
            Red Test
        </div>
    </div>
    <div style="display:inline-block; width:69%">
        <span>Description</span>
        <textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
    </div>
</div>
</body>
</html>
...