Question

随着分辨率的提高，我正在建设的网站要求增加文本区域的大小我尝试使用浮动和非浮动div进行此操作，但在我尝试的每个场景中，div都很好地对齐，但我无法控制textarea大小。但是，标准表确实提供了开箱即用的功能，除了1即兼容性问题
以下代码按照预期的方式在firefox中工作，即（quircks模式）
标准即无法调整textarea高度。
我不介意一些开箱即用的想法，只要它完成工作就不必是表格div或其他任何东西。
我知道javascript可以做一些分辨率计算但是这个解决方案对于简单的布局问题感觉有点过于复杂。更简单＆amp;代码越小越好。

<!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>

Answer 1

好的解决方案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>

我是否被迫使用嵌套表进行布局以缩放textarea？（包括示例html）

1 个答案: