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

CSS pseudo-class: empty makes me shine (example code)

Anyone who has read my articles recently knows th...

Get a list of your top 10 most frequently used terminal commands in Linux

I think the commands I use most often are: Choice...

Detailed explanation of common methods of JavaScript arrays

Table of contents Common array methods pop() unsh...

Introduction and architecture of Apache Arrow, a high-performance data format library package on JVM (Gkatziouras)

Apache Arrow is a popular format used by various ...

A detailed introduction to the CSS naming specification BEM from QQtabBar

BEM from QQtabBar First of all, what does BEM mea...

Introduction to the application of HTML tags superscript sup and subscript sub

HTML tag: superscript In HTML, the <sup> tag...

JavaScript to achieve simple tab bar switching case

This article shares the specific code for JavaScr...

HTML+CSS to achieve text folding special effects example

This article mainly introduces the example of rea...

Implementation of react routing guard (routing interception)

React is different from Vue. It implements route ...

JavaScript dynamically generates a table with row deletion function

This article example shares the specific code of ...

How to query data within a certain period of time with Vue front-end and Django back-end

Preface During the development process, you will ...

A brief analysis of React Native startReactApplication method

In this article, we sorted out the startup proces...

Reasons and solutions for being unable to remotely connect to MySQL database under CentOS7

Preface I recently encountered a problem at work....

How to use history redirection in React Router

In react-router, the jump in the component can be...

...