我和AndyHin有同样的问题(CSS HTML - DIV height fill remaining space),但在Hussein说的时候看不到在哪里插入javascript。我必须承认我在js写作时还很新。
我已尝试将其包含在头标记之间,如下所示,我也尝试将其插入到jquery中,但无济于事。
<head>
<script>
Hussein's answer
</script>
</head>
答案 0 :(得分:2)
它依赖于页面上的元素,因此您需要延迟脚本执行,直到构建完DOM之后(因此实际上可以选择所需的元素)。你有两种选择:
将<script>
标记放在HTML文档正文的末尾:
<script>
// code here
</script>
</body>
将<script>
标记放在<head>
标记内(或<body>
内的任何位置,因为它实际上并不重要),并使用DOM ready
个事件处理程序:
<script>
$(document).ready(function() {
// code here
});
</script>
答案 1 :(得分:1)
将放在关闭正文标记(</body>
)之前(最佳解决方案),或者用
$(function() { Hussein's answer });
如果你没有在文档的末尾添加脚本或者使用$(document).ready()
,那么代码会在dom准备好之前执行,因此你的javascript会找到dom元素,并且什么都不做(在最好的情况下) )!
以下是关于$(function() {})(简称$(document).ready()
)
答案 2 :(得分:0)
在头部
中添加以下参考<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
您可以在页面上的任何位置插入。
<script>
$(document).ready(function(){
var one = $('#col_1').height(),
two = $('#col_2').height(),
remaining_height = parseInt($(window).height() - one - two);
$('#col_3').height(remaining_height);
});
<script>