<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>jQuery实现左右div自适应高度完全相同 </title>
<style type="text/css">
<!--
body{FONT-SIZE: 14pxbackground-color:#fff}
-->
</style>
<style type="text/css">
#left{background:#999999float:leftwidth:100px}
#right{background:#0066FFcolor:#fffwidth:300pxfloat:left}
.clear{clear:both}
</style>
</head>
<body>
<h3>标题</h3>
<div id="left">
<div style="padding:10px">
右边文字
</div>
</div>
<div id="right">
<div style="padding:10px">
左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字 左边文字
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
function $(id){
return document.getElementById(id)
}
function getHeight() {
if ($("left").offsetHeight>=$("right").offsetHeight){
$("right").style.height=$("left").offsetHeight + "px"
}
else{
$("left").style.height=$("right").offsetHeight + "px"
}
}
window.onload = function() {
getHeight()
}
</script>
<div style="clear:both"></div>
</body>
</html>
css代码需要在头尾分别加上开始和结束符：<style>
</style>
放在页面的body以上的位置比较好，这样不会影响页面加载的效果。
希望能帮到你
并没有清楚你想实现的是啥样子……
头尾是随高度改变但一直保持在屏幕上……你确定你想过头或尾的内容超过1/3屏幕的时候的样子？
<!DOCTYPE html><html lang="cmn-Hans">
<head>
<meta charset="UTF-8">
<title>?</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="t">头</div>
<div class="m">中</div>
<div class="f">尾</div>
<!-- <div class="t">头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头<br>头</div> -->
<!-- <div class="m">中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中<br>中</div> -->
<!-- <div class="f">尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾<br>尾</div> -->
</body>
</html> body {
margin: 0
padding: 0
display: flex
flex-direction: column
height: 100vh
}
.t {
background-color: #03A9F4
overflow: auto
}
.m {
background-color: #009688
height: 100%
overflow: auto
}
.f {
background-color: #9E9E9E
overflow: auto
}
我只能想到这了
