htmlayout设计ui 基础篇：[13]元素与窗口同步

时间：2026-02-14 04:38:28

1、第一，我们先来看下要实现的效果

1、窗口大小可以拖动改变大小

2、窗口改变大小的时候，textarea也是中着窗口大小自由变化的

这个效果，需要满足上面的2个条件

2、第二，接下来，我们来看看如何实现这个效果

效果就像我们经常看到的QQ聊天窗口一样，下面的文字输入框就是随窗口大小变化而变化的

htmlayout设计ui 基础篇：[13]元素与窗口同步

3、第三，现在开始实现我们今天要做的效果

先来定义整个窗口的默认大小和可以随意拖动的效果

可以拖动的代码是：增加 resizeable就可以了

代码如下：

整个窗口的默认大小为：

<style>

html {

width:569px;

height:422px;

}

</style>

现在窗口默认显示效果如下：

htmlayout设计ui 基础篇：[13]元素与窗口同步

4、第五，接下来，如何让textarea来实现尺寸随窗口自由变化呢？

样式代码如下：

<style>

textarea {

display:block;

size:*;

}

</style>

也就是说，中间size:*=width:*; height:*;也就是说，宽高一致的情况下，可以直接用size:*来表示，这个*表示水平和垂直空间占满剩余空间

5、第六，接下来在<body>中写上<textarea />就可以了

<body>

<div>头部导航代码</div>

<div>底部按钮代码</div>

</body>

效果如下：

htmlayout设计ui 基础篇：[13]元素与窗口同步