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

190

以下に示すマークアップでは、コンテンツ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;
}
css  html  border 
— ヴィンスパヌッチョ
ソース
ページに収まるより多くのコンテンツがある場合、どうしますか？どのブラウザを気にしていますか？
— drs9222 2009

回答:

117

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

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/にアクセスすることをお勧めします

— ジェイソン・ヘルナンデス
ソース
46
このソリューションは、スクロールするページには適していません。
— jbranchaud
3
CSSでのmin-heightプロパティは彼を助ける必要があります...私は推測
— Alfabravo
1
興味深いことに、これは私のスクロールの問題を引き起こすのではなく、並べ替えました
— アランマクドナルド
Chromeの最新バージョンでは動作しません。
— HelloWorldNoMore
48

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

利用可能な垂直ブラウザビューポートを満たすのに十分なコンテンツがない場合、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-または私は眠すぎる

— ギマ
ソース
14
私たちの一部は幸運にも「最新」のブラウザのみをサポートできるので、これは私にとって信じられないほど役に立ちました。ギマに感謝します。私はこのようなことをするためにいくつかの方法を試しましたが、それは常にさまざまな微妙な方法で壊れていました。これははるかに優れています。それでもなぜそれがこのように機能するのかを正確に理解していません。
— Chris Nicola、
1
Flexbox要素は、コンテンツ領域を要素内の要素に分割しようとします。私が提供したソリューションは、1）divの縮小を拒否し、2）.div2の成長を可能にします。したがって、divはコンテンツを非表示にするために縮小せず、.div2のみが展開を許可されます。
— ジーマ14
したがって、これにより、Firefoxで発生していた問題が修正されます。この場合、コンテンツはまだブラウザに対して少し大きすぎます。残念ながら、Chromeでは、これだけでは問題は解決しません。ただし、マージンとパディングを0に設定することもできます。
— Michael Scheper、2015
これが正解です。min-height：100％は、親コンテナにこれ以上何もない場合にのみ機能し、expanding要素の上の兄弟に高さが不明な場合、calcは実際には役に立ちません
— zakius
何時間もこの問題に取り組んできた後、これは私にとって本当にそれを修正した唯一の解決策です。各部分が何をするかについての少しの説明を欠いているだけです。とにかく、@ギマさん、本当にありがとうございました。
— ピラン
18

次のCSSルールで遊んでみてください：

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

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

— ケビン・リード
ソース
これは機能しますが、min-heightを600px以上に増やすと、スクロールが作成されることがわかりました。これがなぜ起こっているのか、あなたは何か考えがありますか？
— Siddharth Patel
1
@SiddharthPatel #content divが親からあふれているため。したがって、＃content divの親にオーバーフロー：自動またはオーバーフロー：非表示のcss値を設定すると、スクロールではなく、拡大/オーバーフローで収まるようになります。コメントではなく、次のような新しい質問のような質問をする方がいいでしょう:)
— コルトマコーマック
各回答の方法を試した後、これが機能する唯一の方法です。ページの高さに合わせて高さの値を調整する必要があるため、これでも完璧に機能します。ただし、すべてのブラウザで同じように機能します。
— TARKUS 2016年
この回答をありがとうございました。それは単純で、複数のプラットフォームでうまく機能します。私は実際にこれを使用したことがありましたが、約1年前に気付かなかったため、2回賛成票を投じることができればと思いました。
— vedi0boy 2016年
4

Ryan Faitの「Sticky Footer」ソリューションを試してください。

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

IE、Firefox、Chrome、Safari、そしておそらくOperaでも動作しますが、テストはしていません。それは素晴らしいソリューションです。実装が非常に簡単で信頼できる。

— 安吉山
ソース
7
リンクダウン！リンクダウン！
— codemirror 2017年
3
ここで🍻私たちの落ちたのhomiesにだ
— エイブラハム・ブルックス
1
— c24w
3

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

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

— 遺伝子
ソース
3

純粋な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

試してください：

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

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

— ステフ
ソース
3

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

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;
}
— デビッドホラーク
ソース
2

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

上記のリンクはダウンしていますが、このリンクはhttps://stackoverflow.com/a/18066619/1944643がは問題あり。：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
@codemirrorありがとう、動作している別のリンクを使用してコメントを編集しました。
— ViniciusJoséLatorre
1

要素自体とその親の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;
}
— ニコ
ソース
これはdivをビューポートの高さまで伸ばすだけで、ページ自体は伸ばしません。
— jansmolders86 2018
1

HTMLを100％埋めるだけで問題は解決すると思います。ボディがHTMLの100％を埋めるが、HTMLが画面の100％を埋めない場合があります。

試してみてください： 

html, body {
      height: 100%;
}
— デビッド・マルシエル
ソース
0

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

— アレクサンダーモーランド
ソース
うわー、それは実際に機能します！ただし、コンテンツがコンテナーからオーバーフローした場合、オーバーフローした部分を表示することはできません...
— adripanico
0

レイアウトがどのように機能するかによっては、<html>要素の背景を設定する必要がなくなる場合があります。これは、常に少なくともビューポートの高さです。

0

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

height: 100%;

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

Javascriptは最も簡単なクロスブラウザーソリューションですが、前述のとおり、クリーンまたは美しいものではありません。

— マーティン
ソース
-2

私はこれが最良の方法ではないことを知っていますが、ヘッダー、メニューなどの位置を混乱させずにそれを理解することはできませんでした。だから...私はそれらの2つの列のためのテーブルを使用しました。それは迅速な修正でした。JSは必要ありません;）

— Wen-D
ソース
-2

最高の標準の最高の実装でも最高の実装でもありませんが、SPANのDIVを変更できます...それはあまりお勧めできませんが、迅速な修正= P =）

— メタファニエル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.