Question

我有一个嵌套的可滚动div。当我更改父div的高度时，我需要通过 CSS 自动更改其高度。怎么做？我非常感谢你的帮助。

<html>
<head>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
$(document).ready(function() {
   $('#main_container').resizable({handles: 'n,e'});
});
</script>

<style type="text/css">

#main_container {  
  position:fixed;
  bottom:0px; 
  height: 300px;
}

#sub_container {
  max-height:80%; 
  overflow:auto;
}

#scrollable_container {
  height:100000em; 
  width:50em;  
}

</style>

</head>
<body>

<div id="main_container">
   <div id="sub_container">
      <div id="scrollable_container">
         test_content<br/>
         test_content<br/>
         test_content<br/>
         test_content<br/>
         test_content<br/>
         test_content<br/>
         test_content<br/>
         test_content<br/>
      </div>                  
   </div>  
</div>

</body>
</html>

感谢所有人。

Answer 1

这样的事情可以解决问题：

$('#main_container').resize(function() {
    var newHeight = $(this).innerHeight() * 0.8;
    $("#sub_container").css('height', newHeight + 'px');
});

Answer 2

使用以下外部文件 jQuery resizable

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

Check this fiddle

#sub_container {
  max-height:100%;
  overflow:auto;
}

当父级div调整大小时，自动缩放子级可滚动div

2 个答案:

Check this fiddle