Html 两列使用全宽，第一列是可调整大小的文本区域

我想做一个编辑器，左边是代码，右边是结果

为什么

#右侧的文本粘贴在白色/蓝色边界上？为什么没有填充物？（我想要10像素的填充物）。

*{margin:0；padding:0；border:0；}
html，正文{高度：100%；溢出：隐藏；}
.列{填充：10px；溢出：y形滚动；高度：计算（100%-20px）；}
#写入{最小宽度：1px；最大宽度：99%；浮动：左侧；宽度：50%；调整大小：水平；}
#右{背景色：蓝色；}

您可以使用右下角：resize拖动此列的宽度
为什么要将其粘贴到白色/蓝色边界？为什么没有填充物？我想要10像素的填充物

#右侧

分布在浮动的

文本区域

下，您的文本远离填充，由浮动的

文本区域

推动

可以重置非浮动元素的属性。以溢出为例

*{margin:0；padding:0；border:0；}
html，正文{高度：100%；溢出：隐藏；}
.列{填充：10px；溢出：y形滚动；高度：计算（100%-20px）；}
#写入{最小宽度：1px；最大宽度：99%；浮动：左侧；宽度：50%；调整大小：水平；}
#右{背景色：蓝色；溢出：隐藏；}

您可以使用右下角：resize拖动此列的宽度
为什么要将其粘贴到白色/蓝色边界？为什么没有填充物？我想要10像素的填充物如果您更正

overflow: y-scroll;

到

你会发现，
填充
声明工作正常。
@Basj因为：）语法错误导致CSS解析器忽略整个块。鲁宁：语法错误是在我的代码中还是在这个答案的代码中？
overflow-y: scroll;