3

私が見つけた2つの例を組み合わせて：

http://alistapart.com/article/holygrail

http://mystrd.at/modern-clean-css-sticky-footer/

このレイアウトにたどり着きました。

http://jsfiddle.net/xVuh5/

素晴らしいですが、3列の高さを100％にしたいと思います。

誰でも助けてもらえますか？

ありがとうございました

テキストに jsfiddle を含めるための SO エディター検証によって求められる html および css スクリプトの本文:

<div id="header">This is the header.</div>

<div id="container">

    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Text Text</p>
    </div>

</div>

<div id="footer">This is the footer.</div>


    /*** The Essential Code ***/
    * /* For CSS Reset */ 
    { 
        padding: 0; 
        margin: 0; 
    } 

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

    body {
        min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        margin: 0 0 100px; /* bottom = footer height */
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
    }

    #container .column {
        position: relative;
        float: left;
    }

    #center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 150px;              /* RC fullwidth */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

入ってくる最初の回答が私の質問の要点を逃していることがわかったので、質問をより明確にするためにこの画像を追加しています。

ここに画像の説明を入力

4

15 に答える 15

2

考えられる解決策: DEMO

高さを調整するためにラッパークラスを使用しました。

.wrapper{
    height: auto !important;
    min-height: calc(100% - 60px);/* 100% - 30px header - 30px footer*/
}

列の幅を調整します。

于 2013-10-07T08:31:16.197 に答える
0

前述のように、「display: table;」: JSFiddleで動作します。

ただし、float:left では、div を同じ高さにすることはできません。

    #container {
        display: table;
    }
    #container .column {
        position: relative;
        float: top;
    }
    #center {
        ...
        display: table-cell;
    }
    #left {
        ...
        display: table-cell;
    }
    #right {
        ...
        display: table-cell;
    }

そして、div-s の順序:

  <div id="left" class="column">
  </div>
  <div id="center" class="column">
  </div>
  <div id="right" class="column">
  </div>

ああ、ヘッダーとフッターをフロートにするのをほとんど忘れていました。

  #footer {
      ...
      position: fixed;
  }
于 2013-10-15T14:53:02.273 に答える
0

Jquery を使用して目標を達成できます。

var height = $(window).height();   // returns height of browser viewport or use next line
var height = $(document).height(); // returns height of HTML document , just use what u need, not both.

それから ：

$('.cols').height(height);

だったらこれが一番いいと思う

于 2013-10-15T19:07:06.443 に答える
0

これは、次の関数を使用して実現できます。そして、body onload で呼び出します。

<body onload="height()"></body>

次の関数を追加し、HTML に JQuery ライブラリを追加します。

function height()
{
var ele = document.getElementById('container');
$(ele).css("height", window.innerHeight - 100);
var height = $(ele).css("height");
$("#left").css("height",20+height);
$("#center").css("height",height);$("#right").css("height",20+height);
}
于 2013-10-16T06:07:32.873 に答える
0

シンプルに。

HTML:

<div class='section'>
    data
</div>
<div class='section'>
    data
</div>
<div class='section'>
    data
</div>

CSS:

html, body { height: 100%; } /** Will not work without it because until and unless the height of the parent divs are not 00% the children could not have the height 100% aswell. **/

.section {
    width: calc(100%/3); /** To make the width of all the divs same **/
    height: 100%; /** Obivo, making their height to 100% **/
    display: inline-block;
}

.footer {
    position: absolute; /** To enable **bottom** property to work :P **/
    bottom: 0; /** To stick it to the bottom **/
}

それが役に立てば幸い。

于 2013-10-14T20:18:50.163 に答える
0

高さの場所で min-height を設定する必要があり、他の方法は維持するだけです

height:900px;

このように（静的な高さ）フルハイトでCSSを維持します

overflow:scroll; or overflow:auto;
于 2013-10-14T11:27:21.337 に答える
0

最も簡単な解決策:高さ:100%;を適用します。#container .columnと#containerの両方に。私はあなたの JSFiddle でそれを試してみましたが、うまくいくように見えました。要点は、列を含む div にも 100% の高さを適用する必要があることです。

したがって、これが新しい CSS になります。

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
        height:100%;
    }

    #container .column {
        position: relative;
        float: left;
        height:100%;
    }
于 2013-10-10T10:59:49.703 に答える
0

あなたの強化されたコード: http://jsfiddle.net/xVuh5/6/
私は多くのことを変更しました:

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

    body {
        min-width: 630px;         
        margin: 0 0 100px;
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container .column {
        position: absolute;
        float: left;
    }

    #center.column{
        position:relative;
        min-width:100px;
    }

    #center {
        padding: 10px 20px;
        width: 100%;
        margin-right:150px;
        margin-left:150px;
    }

    #left {
        width: 130px;
        padding: 0 10px;
        left: 0px;
    }

    #right {
        width: 130px; 
        padding: 0 10px;
        right:0px;
    }

    #footer {
        clear: both;
        margin-bottom: 0px;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 0px;
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        display:block;
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
        z-index:101;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }



更新: avrahamcoolソリューションははるかに優れています。クリーンなコードを使用することは常に優れたソリューションです。

于 2013-10-07T08:48:52.907 に答える
0

I edited your fiddle and just added a height field to the left, right, and center fields of the css portion. The number can be arbitrarily large and it should work for all display sizes. Definitely simpler than all the other solutions.

Edit: The background of the right, middle, and left will only go as far as the text itself without specifying the height. 100% height changes nothing, it only works to override a parent element with a different specified height (such as if a pixel height had been defined for all paragraph tags, but you want the background of one to cover all of the text and only the text, you would use ). To change the height to be the whole page, either the arbitrarily large height or another solution would be needed, but this is the reason it isn't working. 100% height makes it as if height had not been mentioned before. (this is based on my small amount of experience with one browser, not all solutions will work for all broswers)

于 2013-10-16T13:48:12.917 に答える