怎样使可编辑的DIV固定大小，当内容多时，就自动出现滚动条

怎样使可编辑的DIV固定大小，当内容多时，就自动出现滚动条

方法一

<style type="text/css">
#Composition{
BORDER-RIGHT: #fff 2px inset;
PADDING-RIGHT: 5px;
BORDER-TOP: #fff 2px inset;
PADDING-LEFT: 5px;
color: #000000;
BACKGROUND: white;
PADDING-BOTTOM: 5px;
OVERFLOW: auto;
BORDER-LEFT: #fff 2px inset;
PADDING-TOP: 5px;
BORDER-BOTTOM: #fff 2px inset;
}
</style>
<div ID="Composition" name="Composition" style="WIDTH: 100%; HEIGHT: 400px">在线编辑器</div>

可编辑

<style type="text/css">
#Composition{
BORDER-RIGHT: #fff 2px inset;
PADDING-RIGHT: 5px;
BORDER-TOP: #fff 2px inset;
PADDING-LEFT: 5px;
color: #000000;
BACKGROUND: white;
PADDING-BOTTOM: 5px;
OVERFLOW: auto;
BORDER-LEFT: #fff 2px inset;
PADDING-TOP: 5px;
BORDER-BOTTOM: #fff 2px inset;
}
</style>
<div ID="Composition" contentEditable="true"  name="Composition" style="WIDTH: 100%; HEIGHT: 400px">在线编辑器</div>

方法二

<div id="div1" style="width:100px;height:100px;overflow:auto;">
<pre>
asdfasdfasdf
asdf
asd
adfs
as
df
asdf
asdfasd
</pre>
</div>