HTML left, center, right adaptive layout (using calc css expression)

In the latest HTML standard, there is a calc CSS expression that we can use to calculate the layout.
But it is not supported in the old IE. In order to support all browsers, js is used here.
screenshot:

code:

Copy code

The code is as follows:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
var left,center,right,width;
window.onload = function(){
left=$('left');
center=$('center');
right=$('right');
onresize();
};
window.onresize = function() {
try {
width = document.body.clientWidth;
center.style.width = (width - left.clientWidth - right.clientWidth - 0) + "px";
}catch(e){
//If it is less than 0, an error will be reported
}
};
function $(id){
return document.getElementById(id);
}
</script>
<style>
body,html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#left,#center,#right
width:200px;
height:100px;
background-color:rgb(34,124,134);
float:left;
height:100%;
}
#center{
background-color:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html>

Windows Server 2016 Remote Desktop Services Configuration and License Activation (2 Users)

Blog

HTML left, center, right adaptive layout (using calc css expression)

Detailed explanation of the difference between alt and title

Detailed example of clearing tablespace fragmentation in MySQL

Solution to the error "Disk sda contains BIOS RAID metadata" when installing CentOS 6.x

Native JavaScript carousel implementation method

js version to realize calculator function

The perfect solution to the Chinese garbled characters in mysql6.x under win7

How to use Docker-compose to deploy Django applications offline

jQuery plugin to achieve code rain effect

The button has a gray border that is ugly. How to remove it?

Windows Server 2016 Remote Desktop Services Configuration and License Activation (2 Users)

Recommend

How to customize Docker images using Dockerfile

Winows Server 2019 Activation Code & Volume License Edition KMS Installation Key GVLK

Embed codes for several older players

Five solutions to cross-browser problems (summary)

Detailed installation tutorial of zabbix 4.04 (based on CentOS 7.6)

Some conclusions on developing mobile websites

Detailed tutorial on installing mysql on centos 6.9

Mysql example of splitting into multiple rows and columns by specific symbols

Use Angular CDK to implement a Service pop-up Toast component function

Solution to MySQL error code 1862 your password has expired

Who is a User Experience Designer?

Discuss the value of Web standards from four aspects with a mind map

Detailed explanation and summary of the use of Linux scheduled task Crontab command

Understand all aspects of HTTP Headers with pictures and text

What you need to understand about MySQL locks