Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>上中下欄CSS版面配置</title>
  <style>
    body { margin: 0px; }
    .top {
      background-color: #ffccdd; height: 150px;
    }
    .middle {
      background-color: #ccddff; padding: 6px;
      position: absolute; left: 0px; right: 0px; bottom: 150px;
      top: 150px; overflow: auto;
    }
    .bottom {
      background-color: #ccffdd; 
      position: absolute; left: 0px; right: 0px;bottom: 0px;
      height: 150px;
    }
    .hide-top .top { display: none; }
    .hide-top .middle { top: 0px; }
  </style>
</head>
<body>
  <div class='top'></div>
  <div class='middle'>
    <input type="button" id='btn' value="Toggle Top Row" />
    <br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
    <br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
    <br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
    <br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
  </div>
  <div class='bottom'></div>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
  <script>
    $("#btn").click(function() {
      $("body").toggleClass("hide-top");
    });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers