首页  编辑  

一个自动换行和铺满整个工作区的编辑器布局模板

Tags: /计算机文档/网页制作/   Date Created:

一个Flex的例子，编辑器布局模板。
效果图：
  1. 整个页面有一个父div parent，铺满整个窗口
  2. parent有两个子div，一个为toolbar，一个为editor
  3. toolbar在上面，有若干个button，如果页面宽度不足，button自动多行换行排列
  4. editor为铺满整个parent的剩余空间
  5. 如果editor内部的内容很多，editor内部会出现滚动条，整个页面无滚动条
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flexbox Example</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .parent {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .toolbar {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      flex: none;
      height: auto;
	  border-bottom: 1px solid #ccc;
    }
    .toolbar button {
	  border:0;
	  font-size: 24px;	  
	  padding: 10px;
	  font-family: webdings;
      margin-right:5px;
	  background-color: transparent;
    }
	.toolbar button:hover {
	  background-color: #b0e2ff;
	  cursor:pointer;
    }

    .editor {
      margin: 0;
	  overflow: auto;
	  border:0px;
	  padding: 10px;
      flex: 1;
	  outline: none;
    }
	.editor:empty:before {
	  color: gray;
	  content: "请在这里编辑内容";
	}
  </style>
</head>
<body>
  <div class="parent">
    <div class="toolbar">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button>A</button>
      <button>B</button>
      <button>C</button>
      <button>D</button>
      <button>E</button>
      <button>F</button>
      <button>G</button>
      <button>H</button>
      <button>I</button>
      <button>J</button>
      <button>K</button>
      <button>L</button>
      <button>M</button>
      <button>N</button>
      <button>O</button>
      <button>P</button>
      <button>Q</button>
      <button>R</button>
      <button>S</button>
      <button>T</button>
      <button>U</button>
      <button>V</button>
      <button>W</button>
      <button>X</button>
      <button>Y</button>
      <button>Z</button>
    </div>
    <div class="editor" contenteditable>
      This is editor.
    </div>
  </div>
</body>
</html>