fixed-toolber

In this example below you will see how to do a fixed-toolber with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rewindme, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rewindme ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>fixed-toolber</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="toolbar">
  <button>버튼</button>
  <button>버튼</button>
  <button>버튼</button>
  <button>버튼</button>
</div>
<div class="container">
  <div class="editor" contenteditable="true">
    솰라솰라
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/rewindme/fixed-toolber-KvKjoq */
.toolbar {
  background-color: #f00;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px;
}

html, body {
  height: 100%;
}

.container {
  padding-top: 50px;
  background-color: #fcf;
  height: 100%;
  box-sizing: border-box;
}
.container .editor {
  height: 200%;
}

Comments