如何将100％的高度应用于div？ [英] How to apply 100% height to div?
问题描述
我想让最后/第三个div填充整个剩余空间。我给了100％的高度，但有滚动条来了，我不想显示。我有相同的任何CSS解决方案。如果不可能从css然后jQuery / JS解决方案将很好。
I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
推荐答案
在jQuery中，你可以尝试这样： / p>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
每当窗口被调整大小时，最后一个div的高度被修改，使得div扩展到底部这一页。
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
如果你从窗口的高度中减去div的顶部偏移量，那么就是left具有最大高度可用。如果应用了填充边框，则可能需要调整已减少的边框值，例如：
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
假设您想要从窗口底部的div 30px。
Assuming you want the div 30px from the bottom of the window.
这篇关于如何将100％的高度应用于div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
