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>

<<: PHP-HTMLhtml important knowledge points notes (must read)

>>: Vue achieves the top effect through v-show

Learn v-model and its modifiers in one article

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

Learn v-model and its modifiers in one article

How to find out uncommitted transaction information in MySQL

MySQL tutorial thoroughly understands stored procedures

Summary of four ways to introduce CSS (sharing)

Detailed explanation of the principles and usage of MySQL data types and field attributes

Self-understanding of the background-position attribute in background image positioning

How to build a React project with Vite

How to configure Openbox for Linux desktop (recommended)

CSS3 countdown effect

Repair solution for inconsistent MySQL GTID master and slave

Recommend

Tutorial on installing lamp-php7.0 in Centos7.4 environment

Summary of various forms of applying CSS styles in web pages

A brief introduction to Tomcat's overall structure

Example code for implementing large screen adaptation on PC using vue+px2rem (rem adaptation)

MySQL 5.7.18 download and installation process detailed instructions

How to create a swap partition file in Linux

Five solutions to cross-browser problems (summary)

Detailed explanation of memory management of MySQL InnoDB storage engine

Implementation of Jenkins+Docker continuous integration

How to use MySQL DATEDIFF function to get the time interval between two dates

css Get all elements starting from the nth one

5 VueUse libraries that can speed up development (summary)

MySQL Series 8 MySQL Server Variables

mysql5.7.22 download process diagram

Detailed installation and use of SSH in Ubuntu environment