Как подать заявку 100% высотой к отделению?
Я использовал его во внутренних циклах графического кода игры, где Вы хотите некоторый уровень абстракции и модульного принципа, но не можете оплатить стоимость ответвлений или виртуальных вызовов. В целом это было лучшее решение, чем быстрое увеличение рукописных функций особого случая.
11 ответов
In jQuery, you can try something like this:
$(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. Window's resize method is called on page load so that the div is resized immediately.
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);
Assuming you want the div 30px from the bottom of the window.
Вот небольшое исправление 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>
The property 'height: 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.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that 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="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>
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...
You can hide the overflow in the containing 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.
Вы также можете использовать искусственные столбцы, добавив вертикально повторяющееся фоновое изображение в CSS создание видимости столбцов в пространстве - это дает видимость. Вы можете добавить это изображение в div, который охватывает три столбца, или в тег body.
Если в этих столбцах будет контент, вероятно, стоит добавить его, поскольку столбцы будут вести себя по-другому.
В современных браузерах: установите position: relative в контейнере div , position: absolute в третьем div. Затем вы можете расположить его вверху и внизу контейнера одновременно: top: 0px , bottom: 0px;
Просто не беспокойтесь об этом, если ваша цель состоит в том, чтобы цвет заливал нижнюю часть.
Установите цвет внешнего блока 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>
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)
<!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 entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
$(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;
});
});
включите следующее на теге вашего скрипта или на внешнем javascript. Затем измените
при изменении размера окна... оно автоматически подгонится по высоте под доступное место внизу. вы можете иметь столько divs, сколько захотите, однако внутри этого родителя вы можете иметь только одну упругость. не стоит беспокоиться о вычислении нескольких эластичностей :) надеемся, это поможет
.