如何在流体布局中创建可调整大小的滚动文本框

how do I make a resizable scrolling text box in a fluid layout?

本文关键字：滚动 文本 可调整 创建 布局      更新时间：2023-09-26

我尝试使用Dreamweaver的标准流体布局，并在桌面设计中将其修改为10%的列宽和24列。我试过在一个div中创建一个div(请原谅我，我是Dreamweaver的新手)，并将文本框的约束设置在外部div中，并且没有能够在这方面提出解决方案。

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

从本质上讲，问题在于能够设置文本框的垂直约束，使其与屏幕尺寸变化成比例;横向也可以，因为我可以在Dreamweaver的设计模块中设置宽度限制。

我想我必须通过某种javascript来设置它;尽管我对java一窍不通，除了从编写java的人那里拿代码，然后把它插到网站上。

很抱歉这篇文章漫无边际，我希望它能让你明白。

我正在帮助你解决关于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>

这里是一个jsFiddle，看看它是什么样子

相关文章：