web-dev-qa-db-ja.com

DIVブロックにコンテンツがない場合でも、ページの下部まで拡張するにはどうすればよいですか？

以下に示すマークアップでは、コンテンツdivをページの一番下まで伸ばそうとしていますが、表示するコンテンツがある場合にのみ伸びています。これを行う理由は、表示するコンテンツがなくても、ページの下に垂直の境界線が表示されるためです。

これが私のHTMLです：

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

そして、私のCSS：

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
csshtmlborder
173
Vince Panuccio

あなたの問題は、divが100％の高さではないということではなく、その周りのコンテナがそうではないということです。これは、あなたが使用していると思われるブラウザで役立ちます：

html,body { height:100%; }

パディングとマージンも調整する必要があるかもしれませんが、これにより90％の道が開けます。すべてのブラウザーで動作させる必要がある場合は、少し調整する必要があります。

このサイトにはいくつかの優れた例があります。

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

http://quirksmode.org/ に行くこともお勧めします

103
Jason Hernandez

ページの下部にフッターを貼り付けるのではなく、タイトルで直接質問に答えるようにします。

使用可能な垂直ブラウザビューポートを満たすのに十分なコンテンツがない場合、divをページの下部まで拡張します。

デモ（フレームハンドルをドラッグして効果を確認）： http://jsfiddle.net/NN7ky
（上：クリーン、シンプル。下：フレックスボックスが必要- http://caniuse.com/flexbox ）

HTML：

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS：

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da-または私はあまりにも眠いです

39
Gima

次のCSSルールを試してみてください。

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

ページに合わせて高さを変更します。ブラウザ間の互換性のために、高さは2回言及されています。

15
Kevin Read

min-height 宣言でハッキングできます

<div style="min-height: 100%">stuff</div>
6
Owen

ライアンフェイトの「スティッキーフッター」ソリューションをお試しください。

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

IE、Firefox、Chrome、Safari、そしておそらくOperaでも動作しますが、テストしていません。それは素晴らしい解決策です。実装が非常に簡単で信頼性が高い。

4
Anjisan

Min-heightプロパティは、すべてのブラウザーでサポートされているわけではありません。長いページで高さを拡張するために#contentが必要な場合、高さプロパティは短くします。

これはちょっとしたハックですが、幅が1ピクセルで高さが空のdivを追加できます。 #content div内の1000px。これにより、コンテンツは少なくとも1000pxの高さになりますが、必要に応じてより長いコンテンツでも高さを拡張できます

3
Gene

純粋なCSSほどエレガントではありませんが、わずかなJavaScriptでこれを実現できます。

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
3
Adam Franco

高さが固定されたスティッキーフッター：

HTMLスキーム：

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS：

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
3
David Horák

試してください：

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

まだテストしていません...

3
Steph

この問題は、HTMLを100％埋めるだけで修正され、ボディがHTMLの100％を埋めても、HTMLが画面の100％を埋めない可能性があると思います。

で試してください：

html, body {
      height: 100%;
}
1
David Marciel

http://mystrd.at/modern-clean-css-sticky-footer/ を試してください

上記のリンクはダウンしていますが、このリンク https://stackoverflow.com/a/18066619/194464 は問題ありません。 ：D

デモ：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
1
Vinicius José Latorre

要素自体とその親のmin-heightプロパティに「vh」長さ単位を使用できます。 IE9以降でサポートされています。

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS：

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
0
Nico

私はコードを持っていませんが、一度height：1000pxとmargin-bottom：-1000pxの組み合わせを使用してこれを行ったことを知っています。やってみて.

0
Alexander Morland

また、これが好きかもしれません： http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

それはあなたが求めたものではありませんが、あなたのニーズにも合うかもしれません。

0
Dan

スタイルシート（CSS）のみを使用してこれを達成することはできません。一部のブラウザは受け入れません

height: 100%;

ブラウザウィンドウの視点よりも高い値として。

前述のように、Javascriptは最も簡単なクロスブラウザーソリューションです。

0
Martin

レイアウトの動作方法によっては、<html>要素の背景を設定することで逃げる場合があります。これは常に少なくともビューポートの高さです。

0
user42092