Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>JS Bin</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  </head>
  <body>
    <div class="page">
      <div class="header">This header can ocupate more then one line when width resize</div>
      <div class="extraDiv">
        <div class="content"> This container should fill all rest space and can use vertical overflow if content does not fit</div>
      </div>
    </div>
</body>
</html>
 
html, body {
  width: 100%;
  height: 100%;
  
  margin: 0;
  padding 0;
}
​
.page {
  background-color: #8f8;
  white-space: nowrap;
  
  width: 70%;
  height: 80%;
  min-width: 200px;
  
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
​
.header {
  background-color: #fcc;
  
  white-space: normal;
  
  width: 100%;
  height: 10%;
}
​
.content {
  background-color: #ccf;
  
  white-space: normal;
  
  height: calc(100% - 10%);
  
  overflow: auto;
}
 
$(".page").resizable();
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers