<!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>
Read More:
- Golang: How to Read File All Content in one time
- [Solved] devTools failed to load sourcemap: Could not parse content for map
- [vite] Failed to parse source for import analysis because the content contains invalid JS syntax.
- How to React page to achieve entry and exit animation
- Vue project change directory run error:Multiple assets emit different content to the same filename index.html
- How to open a page in a new window by Vue router
- Vue refreshes the current page (no flash screen will appear)
- How to Solve electron import page Error
- [Solved] Vue route jumps to the same page many times error: Navigationduplicated
- Trigger http request when tab page is closed in angular2+ project
- [Solved] fatal error: cuda_runtime.h: No such file or directory
- Vue a page is mounted to send multiple requests at the same time, and the loading is processed uniformly
- Ant design vue table Error: h is not defined [How to Solve]
- The page console error [Vue warn]: Invalid prop: custom validator check failed for prop “status“
- [Solved] Vue Project Modify Page Error: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory
- runtime-core.esm-bundler.js5c406620 [Vue warn] Unhandled error during execution of native event h
- “Failed to load resource: net::ERR_FILE_NOT_FOUND” error. The project created by vue-cli 3.0 can run under dev, and an error is reported after packaging, and the page is blank.
- [Solved] Binding onclick event in JS: for loop: error uncaught typeerror: cannot set properties of undefined (setting ‘classname’)
- CSS to achieve dynamic display of picture text by mouse touch
- Asynchronous loading method of Baidu map