如何在流体布局中制作可调整大小的滚动文本框？答案

【问题标题】：how do I make a resizable scrolling text box in a fluid layout?如何在流体布局中制作可调整大小的滚动文本框？
【发布时间】：2013-03-30 17:32:48
【问题描述】：

我尝试使用 Dreamweaver 的标准流体布局，并在桌面设计上将其修改为 10% 的列宽和 24 列。我尝试在 div 中创建一个 div（请耐心等待，我是 Dreamweaver 的菜鸟），并将文本框的约束设置在外部 div 内，但无法想出一个这方面的解决方案。

我尝试设置文本框本身的参数，但由于 % v. px 的冲突，这也不起作用。在流畅的布局中，我使用 % 来调整大小。

本质上，问题在于能够将文本框上的垂直约束设置为与屏幕尺寸变化成比例；水平很好，因为我可以在 Dreamweaver 的设计模块中设置宽度约束。

我在想我必须通过某种 javascript 来设置它；虽然我对 java 一无所知，除了从构建它的人那里提取代码并将其插入网站。

对于这篇文章的漫无边际的性质感到抱歉，我希望它是有道理的。

【问题讨论】：

标签： javascript scrollbar fluid-layout

【解决方案1】：

我正在帮助您解决有关 jQuery 的其他问题，我决定四处探听并找到了这个问题。我了解您希望列中的文本框具有流体高度。可以这样实现：

CSS：

/* 
   In order to use width/height: 100% on the body and html
   You need to remove the margins and padding on them, otherwise
   you'll see a vertical and horizontal scroll bar, which is awful.
   This way, it removed margins and paddings on everything, ultimately
   leading to better styling overall. 
*/

*
{
    margin: 0;
    padding: 0;
}

body, html
{
    width: 100%;
    height: 100%;
}

/* Create a wrapper to base all other %-based measurements off of. */
#wrapper
{
    width: 100%;
    height: 100%;
}

/* The column that the textbox will be inside */
#someColumn
{
    width: 50%;
    height: 50%;
    margin: 5px;
    padding: 5px;
}

#someColumn textarea
{
    width: 25%;
    height: 50%;
    /* The textbox will now be 50% the height of #someColumn */
}

HTML：

<body>
    <div id="wrapper">
        <div id="someColumn">
            <textarea></textarea>
        </div>
    </div>
</body>

Here's a jsFiddle to see what it looks like

【讨论】：