Tag Archives: H5 HTML CSS

H5 page left and right stretch content area 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>resize</title>
</head>
<style>
  *,*:before,*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  header,footer{
    flex: none;
    width: 100%;
    height: 60px;
    background: lightgrey;
  }
  footer{
    position: relative;
    background: lightblue;
  }
  .main{
    flex: auto;
    display: flex;
    align-items: stretch;
  }
  .sidebar{
    flex: none;
    width: 200px;
    background: lightgoldenrodyellow;
  }
  .container{
    position: relative;
    flex: auto;
    background: #e0bfc4;
  }
  .resize{
    position: absolute;
    z-index: 100;
    touch-action: none;
  }
  .resize.horizontal{
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    cursor: e-resize;
  }
  .resize.vertical{
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    cursor: n-resize;
  }
</style>
<body>
  <header>Header</header>
  <section class="main">
    <acticle class="sidebar">Sidebar</acticle>
    <acticle class="container">Content
      <div class="resize horizontal" onmousedown="mousedown('horizontal')"></div>
    </acticle>
  </section>
  <footer>Bottom
    <div class="resize vertical" onmousedown="mousedown('vertical')"></div>
  </footer>
</body>
<script>

function mousedown(flag){
  document.onmousemove = function(){
    // console.log("flag",event,flag)
    if (flag === "horizontal"){
      if (event.x < 200 || event.x > 800) return
      var sidebar = document.querySelector(".sidebar")
      sidebar.style.width = event.x + "px"
    } else if(flag === "vertical"){
      if (event.y < 500 || event.y > 877) return
      var foot =  document.querySelector("footer")
      var top = Number(foot.getBoundingClientRect().top)
      var height = Number(foot.getBoundingClientRect().height)
      foot.style.height = height + top -event.y + "px"
    }
  }
}

document.onmouseup = function(){
  document.onmousemove = null
}

</script>
</html>