Javascript 使用一个div限制另一个div的大小
我有两个div，“content left”和“content right”。内容左div的高度可能不同。内容右侧div具有恒定的高度 更新：留下的内容不仅大小不同，而且每分钟的大小也可能不同，这取决于用户的行为 我希望剩下的内容包含一个div滚动条。我不希望浏览器窗口本身有一个滚动条 我希望content right div的内容始终可见。内容权限永远不能从页面上滚动 我想出了下面的代码，但我认为它可以更好 我在firefox和chrome上进行了测试。Internet Explorer与我无关 本质上，我只是“隐藏”左div，确定右div顶部和窗口大小之间的差异，并设置左div的max height属性。然后，通过溢出：auto进行滚动Javascript 使用一个div限制另一个div的大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两个div，“content left”和“content right”。内容左div的高度可能不同。内容右侧div具有恒定的高度 更新：留下的内容不仅大小不同，而且每分钟的大小也可能不同，这取决于用户的行为 我希望剩下的内容包含一个div滚动条。我不希望浏览器窗口本身有一个滚动条 我希望content right div的内容始终可见。内容权限永远不能从页面上滚动 我想出了下面的代码，但我认为它可以更好 我在firefox和chrome上进行了测试。Internet Explorer与我无
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
processLeftDiv();
});
$(window).resize(function() {
processLeftDiv();
});
function processLeftDiv() {
$('#content-left').hide();
windowHeight = $(window).height() ;
positionTop = $('#content-right').position().top ;
$('#content-left').css('max-height', ( windowHeight - ( positionTop + 20 ) ) );
// the 20 is padding
$('#content-left').show();
}
</script>
<title>Test</title>
<style type="text/css">
#header
{
width: 100%;
background: red;
}
#content-left
{
float: left;
margin-bottom: 5px;
width: 50%;
height: 100%;
max-height: 100%;
overflow: auto;
background: blue;
display:none;
}
#content-right
{
float: right;
width: 50%;
background: green;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="body">
<div id="content-left">
Content left
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
repeated 100 times
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
</div><!--close left div-->
<div id="content-right">
Content
<p>Content stuff</p>
</div><!--close right div-->
</div><!--close body div-->
</body>
</html>
$（文档）.ready（函数（）{
processLeftDiv（）；
});
$（窗口）。调整大小（函数（）{
processLeftDiv（）；
});
函数processLeftDiv（）{
$（“#内容左”）.hide（）；
windowHeight=$（window.height（）；
positionTop=$（“#内容右侧”）.position（）.top；
$（“#内容左”）.css（'max-height'，（windowHeight-（positionTop+20））；
//20是填充
$（“#内容左”）.show（）；
}
试验
#标题
{
宽度：100%；
背景：红色；
}
#剩余内容
{
浮动：左；
边缘底部：5px；
宽度：50%；
身高：100%；
最大高度：100%；
溢出：自动；
背景：蓝色；
显示：无；
}
#内容权
{
浮动：对；
宽度：50%；
背景：绿色；
}
标题
标题材料
剩余内容
废话
废话
废话
重复100次
废话
废话
废话
废话
废话
内容
内容材料
想法？无需使用javascript将其复杂化，您可以只使用CSS，更简单。以下是您的操作方法：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
border: 0;
margin: 0;
padding: 0;
outline: 0;
}
.header
{
width: 100%;
height: 100px;
background: red;
}
.wrapper
{
position: absolute;
top: 100px;
bottom: 0;
left: 0;
width: 100%;
}
.content-left
{
float: left;
width: 50%;
height: 100%;
overflow: auto;
background: blue;
}
.content-right
{
float: left;
width: 50%;
height: 100%;
background: green;
}
</style>
</head>
<body>
<div class="header">
<p>Header stuff</p>
</div>
<div class="wrapper">
<div class="content-left">
Content left
</div>
<div class="content-right">
Content right
</div>
</div>
</body>
</html>
身体{
边界：0；
保证金：0；
填充：0；
大纲：0；
}
.标题
{
宽度：100%；
高度：100px；
背景：红色；
}
.包装纸
{
位置：绝对位置；
顶部：100px；
底部：0；
左：0；
宽度：100%；
}
.剩下的内容
{
浮动：左；
宽度：50%；
身高：100%；
溢出：自动；
背景：蓝色；
}
.内容权
{
浮动：左；
宽度：50%；
身高：100%；
背景：绿色；
}
标题材料
剩余内容
内容权
- 始终尝试在html/css中使用类而不是ID，从长远来看，你的生活会简单得多（如果你只想将一些javascript绑定到一个元素，就应该使用ID，没有其他好的理由）
- 总是使用一些CSS重置块（我在body标签上使用了最简单的一个）。我知道这只是一个例子，但在实际应用中这是必须的。谷歌it，有一些很棒的