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

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

Recommend

Summary of WEBAPP development skills (notes for mobile website development)

1. To develop web responsively, the page must ada...

Detailed explanation of MySQL database binlog cleanup command

Overview Today I will mainly share how to correct...

Several methods of horizontal and vertical centering of div content using css3 flex

1. flex-direction: (direction of element arrangem...

Operate on two columns of data as new columns in sql

As shown below: select a1,a2,a1+a2 a,a1*a2 b,a1*1...

HTML end tag issue and w3c standard

According to the principles of W3C, each start tag...

Vue.js uses Element-ui to implement the navigation menu

This article shares the specific code for impleme...

Detailed explanation of MySql 5.7.17 free installation configuration tutorial

1. Download the mysql-5.7.17-winx64.zip installat...

How to configure MySQL8 in Nacos

1. Create the MySQL database nacos_config 2. Sele...

jQuery implements HTML element hiding and display

Let's imitate Taobao's function of displa...

Share 20 excellent web form design cases

Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...

How to implement ansible automated installation and configuration of httpd in Linux system

1. Use ansible's playbook to automatically in...

The difference and choice between datetime and timestamp in MySQL

Table of contents 1 Difference 1.1 Space Occupanc...

How to pop up a temporary QQ dialog box to chat online without adding friends

In fact, this is very simple. We add an a tag to ...

Introduction to major browsers and their kernels

Trident core: IE, MaxThon, TT, The World, 360, So...

css3 animation ball rolling js control animation pause

CSS3 can create animations, which can replace man...