最後の3番目のdivを残りのスペース全体に埋めるようにしたい。 100%の高さを指定しましたが、表示したくないスクロールバーが表示されます。私は同じためのCSSソリューションがあります。 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>
JQueryでは、次のようなことを試すことができます。
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
ウィンドウのサイズが変更されるたびに、最後のdivの高さが変更され、divがページの下部まで拡張されます。ウィンドウのサイズ変更メソッドがページの読み込み時に呼び出されるため、divはすぐにサイズ変更されます。
ウィンドウの高さからdivの上部オフセットを差し引くと、利用可能な最大の高さが残ります。マージンがあり、パディングの境界が適用されている場合、減算される値を調整する必要があります。次に例を示します。
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
ウィンドウの下部から30pxのdivが必要だとします。
最新のブラウザー:set position: relative
コンテナ上div
、position: absolute
は3番目のdivにあります。次に、コンテナの上部と下部に同時に配置できます:top: 0px
、bottom: 0px;
あなたの目標が底を塗りつぶすことであるなら、単にそれについて心配しないでください。
外側のdivの色を設定し、3番目の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>
プロパティ「高さ:100%;」は、特定のdivに利用可能な画面スペースを100%使用するようにブラウザに指示します。つまり、ブラウザは、ブラウザスペースのサイズをチェックし、その中に要素があるかどうかをチェックせずにCSSエンジンに返します。
ここで当てはまると思われる唯一の回避策は、Davidが提供するソリューションを使用して 'position:absolute;下:0; 'そのdivの。
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}
$(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に以下を追加します。それから変える
ウィンドウのサイズを変更すると、自動的に高さが下部の使用可能なスペースに合わせられます。 divはいくつでも持つことができますが、その親の内部にはエラスティックを1つだけ含めることができます。複数のエラスティックを計算するのに煩わされませんでした:)
含まれている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>
この手法を使用してウィンドウのサイズを変更すると、コンテンツが消えることがあることに注意してください。
少し醜いですが、うまくいきます。
<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>
$(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);
});
これは、ブラウザのサイズが変更された場合に備えてください...
これが私が行った小さな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>
純粋なCSSを使用できますheight:100%
(ここで100%はウィンドウ内の可視領域の高さ)DOCTYPEをまったく使用しないか、IE障害のある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>
<!DOCTYPE..
完全に、それでも同じ効果があります。 overflow:hidden
bodyスタイルの宣言は、IEで空のスクロールバーを取り除くことです。ただし、これはquirksモードであることを忘れないでください。これは、予測不可能な領域にいることを意味します。CSSボックスモデルはブラウザごとに異なります。
また、垂直方向に繰り返される背景画像をCSSに追加することで、偽の列を使用して、列がスペースに表示されるようにすることもできます。この画像は、3つの列をラップするdivまたはbodyタグに追加できます。
これらの列にコンテンツが含まれる場合は、列の動作が異なるため、いくつか追加する価値があります。