如何将100％的高度应用于div？
[英]How to apply 100% height to div?
问题描述
I want to make the last/third div to be filled the whole remaining space. 
我想让最后/第三个div填满剩下的整个空间。 I given the 100% height but there is scroll bar is coming, which i dont want to show. 我给了100％的高度，但有滚动条即将到来，我不想显示。 I there any CSS solution for same. 我有任何CSS解决方案相同。 if not possible from css then the jQuery/JS solution will be fine. 如果从css不可能那么jQuery / JS解决方案就没问题了。
<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>
13 个解决方案
解决方案1
23 已采纳 2009-11-30 09:29:08
In jQuery, you can try something like this: 在jQuery中，你可以尝试这样的事情：
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. 每当调整窗口大小时，都会修改最后一个div的高度，以便div延伸到页面底部。 Window's resize method is called on page load so that the div is resized immediately. 在页面加载时调用Window的resize方法，以便立即调整div的大小。
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. 如果从窗口的高度减去div的顶部偏移量，则剩下可用的最大高度。 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);
Assuming you want the div 30px from the bottom of the window. 假设你想要窗口底部的div 30px。
解决方案2
6 2009-11-30 08:20:48
On modern browsers: set position: relative on the container div , position: absolute on the third div. 在现代浏览器上：在容器div上设置position: relative ，在第三个div上position: absolute 。 Then you can position it to the top and bottom of the container the same time: top: 0px , bottom: 0px; 然后你可以同时将它放在容器的顶部和底部： top: 0px ， bottom: 0px;
解决方案3
0 2009-11-30 08:44:26
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. 您还可以通过向CSS添加垂直重复的背景图像来使用虚拟列，使列显示为玩具空间 - 这样可以显示。 You could add this image to the div that wraps the three columns or to the body tag. 您可以将此图像添加到包裹三列或body标签的div中。
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently. 如果这些列中包含内容，则可能值得添加一些，因为列的行为会有所不同。
解决方案4
0 2009-11-30 09:27:41
You can hide the overflow in the containing DIV: 您可以隐藏包含DIV中的溢出：
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique. 请注意，使用此技术调整窗口大小时，内容可能会消失。
解决方案5
0 2009-11-30 09:45:58
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url) 您可以使用纯CSS height:100% （其中100％是窗口中可见区域的高度）值在怪癖模式下完全不使用DOCTYPE或使用IE-faulty HTML 4.0 DOCTYPE（没有.dtd url）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. 你可以完全抛弃<!DOCTYPE..它仍然具有相同的效果。 overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. overflow:hidden在body样式中overflow:hidden声明是为了摆脱IE中的空滚动条。 But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser! 但请记住 - 这是怪癖模式 ，这意味着你在不可预测的领域，CSS盒子模型不同浏览器到浏览器！
解决方案6
0 2009-11-30 09:52:23
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%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! 也许这可行吗？！ But I don't know whats happens if there is to mutch text... 但我不知道如果有变异文本会发生什么...
解决方案7
0 2009-11-30 10:02:18
Simply don't worry about it if your goal is to have the colour fill the bottom. 如果您的目标是将颜色填充到底部，请不要担心。
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in. 设置外部div的颜色，然后让第三个调整其高度，但是当内容进入时它需要。
<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%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
解决方案8
0 2009-11-30 10:12:00
The property 'height: 100%;' 物业'高度：100％;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it. 将指示浏览器占用该特定div的100％可用屏幕空间，这意味着您的浏览器将检查浏览空间大小并将其返回到CSS引擎，而不检查其中是否有任何元素。
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; 我认为适合的唯一解决方法是使用David提供的解决方案来使用'position：absolute; bottom: 0;' 底部：0;' for that div. 为那个div。
解决方案9
0 2009-11-30 10:36:45
it a bit ugly, but it works.. 它有点难看，但它有效..
<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="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
解决方案10
0 2009-11-30 10:39:27
Here's a litle jquery fix I have done: 这是我做过的litle jquery修复：
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
解决方案11
0 2010-01-06 16:43:48
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript. 将以下内容放在脚本标记或外部JavaScript上。 then change 然后改变
when you resize the window... it will automatically fit its height to available space on the bottom. 当你调整窗口大小时......它会自动将其高度调整到底部的可用空间。 you could have as many divs as you like however you can only have one elastic inside that parent. 你可以拥有尽可能多的div，但是你的父母只能有一个弹性。 couldnt be bothered to calculate multiple elastics :) hope it helps 不能打算计算多个弹性:) :)希望它有所帮助
解决方案12
0 2018-05-10 04:19:06
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}
解决方案13
0 2012-01-10 08:33:36
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized.... 这应该包含在浏览器调整大小的情况下....
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.