web-dev-qa-db-ja.com

CSS Divでページの高さが100％拡大

ページの左側にナビゲーションバーがあり、それをページの高さの100％まで伸ばしたいと思います。ビューポートの高さだけでなく、スクロールするまで非表示になっている領域も含まれます。これを実現するためにJavaScriptを使用したくありません。

HTML/CSSでできますか？

cssheightmaxstretch
176
Tom

動的背景用のコンテナとしてdivを使用したときに、私がついに思いついた解決策がこれです。

  • バックグラウンド以外の用途ではz-indexを削除してください。
  • フルハイト列のleftまたはrightを削除します。
  • 全幅の行の場合はtopまたはbottomを削除します。

編集1： FFとChromeでは正しく表示されないため、下記のCSSを編集しました。 HTML上にあるようにposition:relativeを移動し、本文をheight:100%ではなくmin-height:100%に設定しました。

EDIT 2： CSSに追加のコメントを追加しました。上記の説明を追加しました。

CSS：

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

HTML：

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

どうして？

html{min-height:100%;position:relative;}

これがないと、クラウドコンテナのDIVはHTMLのレイアウトコンテキストから削除されます。 position: relativeは、描画時にDIVがHTMLボックスの内側に留まるようにして、bottom:0がHTMLボックスの下部を指すようにします。クラウドコンテナでheight:100%を使用することもできます。これはビューポートではなくHTMLタグの高さを指すようになったためです。

160
Knyri

HTML5では、最も簡単な方法は単にheight: 100vhを実行することです。 'vh'はブラウザウィンドウのビューポートの高さを表します。ブラウザとモバイルデバイスのサイズ変更に応答します。

69
alchuang

あなたは のどのコラム を使用してカンニングすることができますまたはあなたは CSSトリックを使用することができます

13
Ryan Doherty

私は同じような問題を抱えていました、そして、解決策はこれをすることでした：

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

高さがページの高さの100％のページ中心のdivが欲しかったので、私の総合的な解決策は次のとおりでした。

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

あなたは親要素（あるいは単に 'body'）にposition: relative;を持たせる必要があるかもしれません

12
Nate Barr

テーブルを使うのは簡単です：

<html>
<head><title>100% Height test</title></head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody><tr><td>Nav area</td></tr></tbody>
</table>
<div style="border: 1px solid green;">Content blabla...
text<br />
text<br />
text<br />
text<br />
</div>
</body>
</html>

DIVが導入されたとき、人々はテーブルを非常に恐れていたので貧しいDIVが比喩的なハンマーになりました。

8
Aaron Digulla

絶対位置を使用してください。これは、絶対位置の使用に慣れている方法ではないことに注意してください。絶対位置を手動でレイアウトしたり、フローティングダイアログを表示したりする必要があります。ウィンドウやコンテンツのサイズを変更すると、これは自動的に伸びます。これには標準モードが必要だと思いますが、IE6以降でも動作します。

Divをあなたのコンテンツでid 'thecontent'に置き換えるだけです（指定された高さは説明のためだけのものです。実際のコンテンツの高さを指定する必要はありません）。

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

これが機能する方法は、外側のdivがナビゲーションバーの基準点として機能することです。外側のdivは 'content' divの内容によって引き伸ばされます。ナビゲーションバーは絶対位置指定を使用して、親の高さまで伸ばします。水平方向の配置では、コンテンツdivをナビゲーションバーと同じ幅だけオフセットさせます。

これはCSS3フレックスボックスモデルではずっと簡単になりますが、IEではまだ利用できず、いくつか独自の問題があります。

7
tstanis

もっと最近のブラウザをターゲットにしているなら、人生は非常に単純なものになるでしょう。試してみてください。

.elem{    
    height: 100vh;
 }

ページの50％で必要な場合は、100を50に置き換えます。

5
Adam Boostani

私はあなたと同じ問題に遭遇しました。私は背景としてDIVを作りたかったのです。なぜなら、JavaScriptを通してdivを操作するのが簡単だからです。とにかく私がそのdivのためにCSSでした3つのこと。

CSS：

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
5
Talha

単純です、単にテーブルdivでそれを包みます...

The HTML：

<div class="fake-table">
   <div class="left-side">
     some text
   </div>
   <div class="right-side">
     My Navigation or something
   </div>
</div>

CSS：

<style>

 .fake-table{display:table;width:100%;height:100%;}
 .left-size{width:30%;height:100%;}
 .left-size{width:70%;height:100%;}

</style>
1
Steffan Perry
 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }
<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>
1
reaw_ni
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
1
2lessons

モーダルポップアップを表示する前に、Webページ全体を表示したいです。私はCSSとJavascriptを使って多くの方法を試しましたが、次の解決策を見つけるまではどれも役に立ちません。それは私のために働く、私はそれがあなたにも役立つことを願っています。

<!DOCTYPE html>
<html>
        <head>
                <style>
                        html, body {
                            margin: 0px 0px;
                            height 100%;
                        }
          
            div.full-page {
                position: fixed;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity:0.8;
                overflow-y: hidden;
                overflow-x: hidden;
            }
          
            div.full-page div.avoid-content-highlight {
                position: relative;
                width: 100%;
                height: 100%;
            }
          
            div.modal-popup {
                position: fixed;
                top: 20%;
                bottom: 20%;
                left: 30%;
                right: 30%;
                background-color: #FFF;
                border: 1px solid #000;
            }
                </style>
                <script>
                
                        // Polling for the sake of my intern tests
                        var interval = setInterval(function() {
                                if(document.readyState === 'complete') {
                                        clearInterval(interval);
                                        isReady();
                                }    
                        }, 1000);
                        
                        function isReady() {
                                document.getElementById('btn1').disabled = false;
                                document.getElementById('btn2').disabled = false;
                                
                                // disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
                        }
                        
                        function promptModalPopup() {
                document.getElementById("div1").style.visibility = 'visible';
                document.getElementById("div2").style.visibility = 'visible';
                                
                                // disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            }
          
            function closeModalPopup() {
                document.getElementById("div2").style.visibility = 'hidden';  
                document.getElementById("div1").style.visibility = 'hidden';
                                
                                // enable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'scroll';
            }
                </script>
                
        </head>
        <body id="body">
                <div id="div1" class="full-page">
                        <div class="avoid-content-highlight">
                
            </div>
                </div>
        <button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
                <div id="demo">
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                        <h2>Original content</h2>
                </div>
        <div id="div2" class="modal-popup">
            I am on top of all other containers
            <button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
        <div>
        </body>
</html>

がんばろう ;-）

1
Chong Chern Dong