如何保持左右两个DIV高度相同( how to keep two div with same height)
客户的提问：
回答：
use javascript on your body's onload event:
it works on my machine
enjoy the code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css" media="screen">
body
{
margin:0; padding:0; height:100%;
}
#left
{
position:absolute; left:0; top:0px;
width:200px; height: 100%; background:#eaeaea;
border:1px solid #333;
}
.content
{
position: relative; top: 0px; margin-left:205px; background:#ffc;
border:1px solid #333;
}
</style>
<script type="text/javascript">
function full()
{
document.getElementById("left").style.height = document.getElementById("right").offsetHeight + "px";
}
</script>
</head>
<body onload="full();">
<div id="left">
<p class="top">Left DIV</p>
</div>
<div id="right" class="content">
<p> Content DIV </p>
<br />
<br />
Add enough < BR / > tags to get this DIV enough higher than your screen.
<br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br />
test
</div>
</body>
</html>
Unfortunately I haven found out an answer to this. Anybody have an idea ?
I have two DIVs on my master page. Left "frame" and the content. Of course I do have background color on the left frame so my problem is, how to make the DIV height from top to bottom on the left frame ? I can use "height: 100%", but that gives only windows size. So e.g. when content part is higher than screen then the Left Frame ends when you scroll down even you are not at end of the page. I'll try to describe it by this:
回答：
use javascript on your body's onload event:it works on my machineenjoy the code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head><style type="text/css" media="screen">
body {
margin:0; padding:0; height:100%;}#left { position:absolute; left:0; top:0px; width:200px; height: 100%; background:#eaeaea; border:1px solid #333;}.content{ position: relative; top: 0px; margin-left:205px; background:#ffc; border:1px solid #333;}</style><script type="text/javascript"> function full(){document.getElementById("left").style.height = document.getElementById("right").offsetHeight + "px"; }</script> </head><body onload="full();"><div id="left"><p class="top">Left DIV</p></div><div id="right" class="content"><p> Content DIV </p><br /><br />Add enough < BR / > tags to get this DIV enough higher than your screen.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test</div></body></html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述