設定してdivの高さを埋めました
position: absolute;
bottom: 0px;
top: 0px;
ページがビューポートの高さよりも長くない限り、これは問題なく機能します。ページが画面外にスクロールすると、div はそれに合わせて拡大されません。
解決策の 1 つは、overflow: auto; を使用することです。これにより、div にスクロールバーが表示され、コンテンツが画面に表示されたままになります。
ページの高さが増加するにつれて、div の高さを「拡張」する方法はありますか?
編集: JS Fiddle (元の問題): http://jsfiddle.net/GxvuM/ JS Fiddle (オーバーフロー「修正」): http://jsfiddle.net/BenMagee/y8Y97/1/
よろしく、ベン。
どうmin-height: 100%ですか？
http://jsfiddle.net/GxvuM/3/
あなたはjqueryを使うことができますが、私の意見では良い解決策ではありません.
var height = $(document).height();
$("#container").height(height);
誰かが純粋な CSS を使用したより良い解決策を知っている場合は大歓迎です。
以下を使用できます。
$(window).resize(function() {
// then add your js code
var container = $("#container");
var pageWidth = $(window).width();
var pageHeight = $(window).height();
var containerWidth = container.width();
var margin = (pageWidth - containerWidth)/2
container.css("left",margin);
container.css("height",pageHeight);
});
ページサイズの変更に基づいてコンテナの高さが変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
body{
position:relative;
margin:0;
padding:0;
}
.container, .container-text{
width:50%;
padding:20px;
margin-left:25%; /* Half of with remaining space = 50% */
}
.container{
position:absolute;
top:0px;
bottom:0px;
background:#666;
z-index:-1;
}
</style>
</head>
<body>
<div class="container"></div>
<p class="container-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis lobortis ipsum, ullamcorper aliquam lacus euismod sed. Vivamus gravida nunc nec lacus sagittis blandit vel vel lacus. Nunc sed ligula at enim posuere cursus at eget velit. Aenean ut mauris a quam tempus imperdiet. Nulla volutpat, ante rhoncus gravida rutrum, dolor ipsum pretium lorem, ac laoreet mi justo id mi. Cras a urna non ante rutrum interdum. Duis id iaculis ante. Nullam molestie libero eu massa condimentum scelerisque. Cras fringilla, dui eu malesuada mattis, orci lorem faucibus mi, nec tincidunt mauris lectus vel est. Aliquam nunc felis, vestibulum id aliquet eget, pulvinar et turpis. Sed sapien nisi, convallis eu molestie accumsan, sagittis ut ligula. Donec volutpat mollis ullamcorper. Duis rhoncus, orci eu commodo tincidunt, ante neque consequat nisl, quis aliquam sapien nibh non enim. Proin sapien erat, convallis eu euismod non, iaculis et lorem. Nulla a molestie magna. Curabitur auctor, neque eget vulputate euismod, odio mi mattis velit, ac volutpat eros mauris ut metus.
Donec posuere nisi accumsan risus auctor malesuada. Morbi aliquam lectus id sem convallis vitae varius dui lobortis. Phasellus a nulla at dolor consequat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim mi, malesuada at
imperdiet non, posuere nec ipsum. Aliquam sed mi mi. Quisque eleifend lacus eget massa cursus scelerisque. Nam congue neque eget orci hendrerit vitae rhoncus nisl bibendum. Vivamus vestibulum lorem quam, quis accumsan quam. Ut quis ipsum vitae arcu accumsan pulvinar sit amet eget ligula. Nam eget enim ligula, sed tincidunt mi.
Pellentesque euismod nulla at magna luctus sed porttitor tellus vehicula. Nullam id sapien mauris, sit amet adipiscing quam. Ut vehicula viverra sem bibendum condimentum. Morbi egestas sem sed justo consequat pretium. Duis eu lorem sed nibh malesuada imperdiet vel ac neque. Quisque leo lorem, sollicitudin a euismod ac, consequat tempor ipsum. Proin in libero lorem. Proin eu purus ac elit fringilla consequat ut id nisi. Suspendisse sit amet tortor mauris, nec iaculis lacus.
Pellentesque lobortis pharetra luctus. Curabitur tincidunt, odio a ullamcorper fermentum, leo risus malesuada diam, ultrices elementum magna turpis ac metus. Nam ut vehicula magna. Vestibulum porttitor eleifend nisi a mollis. Integer ante justo, condimentum quis vulputate non, interdum vitae lacus. Vestibulum nec enim risus. Pellentesque varius, nisi sit amet auctor gravida, lacus nibh tincidunt diam, in auctor erat nulla iaculis magna. Nullam mattis viverra gravida. Mauris quis arcu quis metus molestie lacinia. Phasellus accumsan sem a ligula fringilla adipiscing. Phasellus enim erat, pellentesque eu consectetur eu, tempus sed purus. Praesent vitae nibh sem, in semper nisl. In hendrerit porta ligula nec mattis. Morbi placerat ante dapibus mi facilisis lacinia. Phasellus dapibus sagittis tortor et aliquet. Maecenas commodo justo nec dolor imperdiet non convallis purus tincidunt.
Vestibulum in ante orci. Etiam in dolor elit, eget luctus arcu. Pellentesque pellentesque sapien in nibh accumsan id gravida ipsum vulputate. Nulla neque metus, sagittis et tempus sed, tempor ut risus. Curabitur vitae elit nec ante pretium malesuada id quis urna. Morbi pulvinar molestie leo, tincidunt sodales justo feugiat at. Maecenas sollicitudin luctus libero eu posuere. Proin vitae enim at est luctus fringilla quis quis justo. Pellentesque interdum, quam a imperdiet auctor, libero erat tristique augue, vel viverra dui mauris nec est. Vestibulum nec mi augue. Cras dapibus, risus at hendrerit consectetur, risus dui porttitor risus, sed lobortis nisi dui ac metus. Donec cursus sollicitudin ipsum, vel aliquet est porta eget. Integer fermentum, mauris quis tincidunt placerat, justo magna scelerisque neque, vel venenatis arcu felis sit amet turpis. Vestibulum eros augue, tincidunt sit amet placerat a, pharetra eget lectus. Proin vel leo et ante auctor elementum. Nam fermentum hendrerit ipsum, vitae posuere magna suscipit nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis lobortis ipsum, ullamcorper aliquam lacus euismod sed. Vivamus gravida nunc nec lacus sagittis blandit vel vel lacus. Nunc sed ligula at enim posuere cursus at eget velit. Aenean ut mauris a quam tempus imperdiet. Nulla volutpat, ante rhoncus gravida rutrum, dolor ipsum pretium lorem, ac laoreet mi justo id mi. Cras a urna non ante rutrum interdum. Duis id iaculis ante. Nullam molestie libero eu massa condimentum scelerisque. Cras fringilla, dui eu malesuada mattis, orci lorem faucibus mi, nec tincidunt mauris lectus vel est. Aliquam nunc felis, vestibulum id aliquet eget, pulvinar et turpis. Sed sapien nisi, convallis eu molestie accumsan, sagittis ut ligula. Donec volutpat mollis ullamcorper. Duis rhoncus, orci eu commodo tincidunt, ante neque consequat nisl, quis aliquam sapien nibh non enim. Proin sapien erat, convallis eu euismod non, iaculis et lorem. Nulla a molestie magna. Curabitur auctor, neque eget vulputate euismod, odio mi mattis velit, ac volutpat eros mauris ut metus.
Donec posuere nisi accumsan risus auctor malesuada. Morbi aliquam lectus id sem convallis vitae varius dui lobortis. Phasellus a nulla at dolor consequat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim mi, malesuada at
imperdiet non, posuere nec ipsum. Aliquam sed mi mi. Quisque eleifend lacus eget massa cursus scelerisque. Nam congue neque eget orci hendrerit vitae rhoncus nisl bibendum. Vivamus vestibulum lorem quam, quis accumsan quam. Ut quis ipsum vitae arcu accumsan pulvinar sit amet eget ligula. Nam eget enim ligula, sed tincidunt mi.
Pellentesque euismod nulla at magna luctus sed porttitor tellus vehicula. Nullam id sapien mauris, sit amet adipiscing quam. Ut vehicula viverra sem bibendum condimentum. Morbi egestas sem sed justo consequat pretium. Duis eu lorem sed nibh malesuada imperdiet vel ac neque. Quisque leo lorem, sollicitudin a euismod ac, consequat tempor ipsum. Proin in libero lorem. Proin eu purus ac elit fringilla consequat ut id nisi. Suspendisse sit amet tortor mauris, nec iaculis lacus.
Pellentesque lobortis pharetra luctus. Curabitur tincidunt, odio a ullamcorper fermentum, leo risus malesuada diam, ultrices elementum magna turpis ac metus. Nam ut vehicula magna. Vestibulum porttitor eleifend nisi a mollis. Integer ante justo, condimentum quis vulputate non, interdum vitae lacus. Vestibulum nec enim risus. Pellentesque varius, nisi sit amet auctor gravida, lacus nibh tincidunt diam, in auctor erat nulla iaculis magna. Nullam mattis viverra gravida. Mauris quis arcu quis metus molestie lacinia. Phasellus accumsan sem a ligula fringilla adipiscing. Phasellus enim erat, pellentesque eu consectetur eu, tempus sed purus. Praesent vitae nibh sem, in semper nisl. In hendrerit porta ligula nec mattis. Morbi placerat ante dapibus mi facilisis lacinia. Phasellus dapibus sagittis tortor et aliquet. Maecenas commodo justo nec dolor imperdiet non convallis purus tincidunt.
Vestibulum in ante orci. Etiam in dolor elit, eget luctus arcu. Pellentesque pellentesque sapien in nibh accumsan id gravida ipsum vulputate. Nulla neque metus, sagittis et tempus sed, tempor ut risus. Curabitur vitae elit nec ante pretium malesuada id quis urna. Morbi pulvinar molestie leo, tincidunt sodales justo feugiat at. Maecenas sollicitudin luctus libero eu posuere. Proin vitae enim at est luctus fringilla quis quis justo. Pellentesque interdum, quam a imperdiet auctor, libero erat tristique augue, vel viverra dui mauris nec est. Vestibulum nec mi augue. Cras dapibus, risus at hendrerit consectetur, risus dui porttitor risus, sed lobortis nisi dui ac metus. Donec cursus sollicitudin ipsum, vel aliquet est porta eget. Integer fermentum, mauris quis tincidunt placerat, justo magna scelerisque neque, vel venenatis arcu felis sit amet turpis. Vestibulum eros augue, tincidunt sit amet placerat a, pharetra eget lectus. Proin vel leo et ante auctor elementum. Nam fermentum hendrerit ipsum, vitae posuere magna suscipit nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis lobortis ipsum, ullamcorper aliquam lacus euismod sed. Vivamus gravida nunc nec lacus sagittis blandit vel vel lacus. Nunc sed ligula at enim posuere cursus at eget velit. Aenean ut mauris a quam tempus imperdiet. Nulla volutpat, ante rhoncus gravida rutrum, dolor ipsum pretium lorem, ac laoreet mi justo id mi. Cras a urna non ante rutrum interdum. Duis id iaculis ante. Nullam molestie libero eu massa condimentum scelerisque. Cras fringilla, dui eu malesuada mattis, orci lorem faucibus mi, nec tincidunt mauris lectus vel est. Aliquam nunc felis, vestibulum id aliquet eget, pulvinar et turpis. Sed sapien nisi, convallis eu molestie accumsan, sagittis ut ligula. Donec volutpat mollis ullamcorper. Duis rhoncus, orci eu commodo tincidunt, ante neque consequat nisl, quis aliquam sapien nibh non enim. Proin sapien erat, convallis eu euismod non, iaculis et lorem. Nulla a molestie magna. Curabitur auctor, neque eget vulputate euismod, odio mi mattis velit, ac volutpat eros mauris ut metus.
Donec posuere nisi accumsan risus auctor malesuada. Morbi aliquam lectus id sem convallis vitae varius dui lobortis. Phasellus a nulla at dolor consequat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim mi, malesuada at
imperdiet non, posuere nec ipsum. Aliquam sed mi mi. Quisque eleifend lacus eget massa cursus scelerisque. Nam congue neque eget orci hendrerit vitae rhoncus nisl bibendum. Vivamus vestibulum lorem quam, quis accumsan quam. Ut quis ipsum vitae arcu accumsan pulvinar sit amet eget ligula. Nam eget enim ligula, sed tincidunt mi.
Pellentesque euismod nulla at magna luctus sed porttitor tellus vehicula. Nullam id sapien mauris, sit amet adipiscing quam. Ut vehicula viverra sem bibendum condimentum. Morbi egestas sem sed justo consequat pretium. Duis eu lorem sed nibh malesuada imperdiet vel ac neque. Quisque leo lorem, sollicitudin a euismod ac, consequat tempor ipsum. Proin in libero lorem. Proin eu purus ac elit fringilla consequat ut id nisi. Suspendisse sit amet tortor mauris, nec iaculis lacus.
Pellentesque lobortis pharetra luctus. Curabitur tincidunt, odio a ullamcorper fermentum, leo risus malesuada diam, ultrices elementum magna turpis ac metus. Nam ut vehicula magna. Vestibulum porttitor eleifend nisi a mollis. Integer ante justo, condimentum quis vulputate non, interdum vitae lacus. Vestibulum nec enim risus. Pellentesque varius, nisi sit amet auctor gravida, lacus nibh tincidunt diam, in auctor erat nulla iaculis magna. Nullam mattis viverra gravida. Mauris quis arcu quis metus molestie lacinia. Phasellus accumsan sem a ligula fringilla adipiscing. Phasellus enim erat, pellentesque eu consectetur eu, tempus sed purus. Praesent vitae nibh sem, in semper nisl. In hendrerit porta ligula nec mattis. Morbi placerat ante dapibus mi facilisis lacinia. Phasellus dapibus sagittis tortor et aliquet. Maecenas commodo justo nec dolor imperdiet non convallis purus tincidunt.
Vestibulum in ante orci. Etiam in dolor elit, eget luctus arcu. Pellentesque pellentesque sapien in nibh accumsan id gravida ipsum vulputate. Nulla neque metus, sagittis et tempus sed, tempor ut risus. Curabitur vitae elit nec ante pretium malesuada id quis urna. Morbi pulvinar molestie leo, tincidunt sodales justo feugiat at. Maecenas sollicitudin luctus libero eu posuere. Proin vitae enim at est luctus fringilla quis quis justo. Pellentesque interdum, quam a imperdiet auctor, libero erat tristique augue, vel viverra dui mauris nec est. Vestibulum nec mi augue. Cras dapibus, risus at hendrerit consectetur, risus dui porttitor risus, sed lobortis nisi dui ac metus. Donec cursus sollicitudin ipsum, vel aliquet est porta eget. Integer fermentum, mauris quis tincidunt placerat, justo magna scelerisque neque, vel venenatis arcu felis sit amet turpis. Vestibulum eros augue, tincidunt sit amet placerat a, pharetra eget lectus. Proin vel leo et ante auctor elementum. Nam fermentum hendrerit ipsum, vitae posuere magna suscipit nec.</p>
</body>
</html>