css

Question

行のデザインで3つのdivを作成しようとしています。ヘッダーとフッターの高さが固定されている場所。中央のdivは、空のスペースを埋めるために拡張されます。私は試しましたが、私が得た最も近いものは以下のコードです。フッターdivを拡張する中央divにまだ問題があります。

html：

<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

css：

#rowOne {
    width: 100%;
    height: 50px;
    background: green;
}
#rowTwo {
    width: 100%;
    background: limegreen;
    height:100%;
    overflow:hidden;
}
#rowThree {
    width: 100%;
    position: fixed;
    clear: both;
    background: green;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
}
#container {
    height: 100%;
}

ここに画像の説明を入力してください

score 2 · Accepted Answer

3 行の純粋な CSS

この投稿が少し長くなっていることは承知していますが、反対の主張にもかかわらず、これは CSS で非常に簡単に行うことができます。JavaScript、jQuery、CSS 3 ハックなどは必要ありません。

以下は、固定ヘッダーとフッター、および動的ボディ div を示す jsf の 2 つです。

この最初のものは、固定ピクセルの高さのヘッダーとフッター、および動的なボディを、画像で必要に応じて正確に表示します

http://jsfiddle.net/LBQ7K/

<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>

html, body, {
height: 100%;
}

.header {
position:   absolute;
top:    0px;
height:     50px;
width:      100%;
background: #f00;
}

.footer {
position:   absolute;
bottom: 0;
height:     50px;
width:      100%;
background: #00f;
}

.cssBody {
position:   absolute;
top:    50px;
bottom: 50px;
width:  100%;
background: #0f0;
}

2 つ目は、同じ手法を使用して動的なヘッダーとフッターを作成できることを示しています。 http://jsfiddle.net/reqXJ/

    <body>
    <div class="header"><p>Header</p></div>
    <div class="cssBody"><p>Hello World</p></div>
    <div class="footer"><p>Footer</p></div>
</body>

html, body, {
    height: 100%;
}

.header {
    position:   absolute;
    top:        0px;
    height:     15%;
    width:      100%;
    background: #f00;
}

.footer {
    position:   absolute;
    bottom:     0;
    height:     15%;
    width:      100%;
    background: #00f;
}

.cssBody {
    position:   absolute;
    top:        15%;
    bottom:     15%;
    width:      100%;
    background: #0f0;
}

score 1 · Accepted Answer

これは非常に一般的な問題です。私にとってうまくいった解決策の 1 つは、次の Web サイトからのものです。

http://ryanfait.com/sticky-footer/

コードで：

http://ryanfait.com/sticky-footer/layout.css

および別の一般的な選択肢:

http://www.cssstickyfooter.com/

これでニーズが満たされない場合は、お知らせください。さらにお手伝いいたします。

score 1 · Accepted Answer

スティッキーフッターを作成しようとしているようですが、いくつかのハックが必要です。

HTML:

<div id='container'>
   <div class="header">
      <h1>Sticky Footer!</h1>
   </div>
   <div id='rowOne'>row 1</div>
   <div id='rowTwo'>row 2</div>
   <div id='rowThree'>row 3</div>
   <div class="push"></div>
</div>
<div id='footer'></div>

.container {
   min-height: 100%;
   height: auto !important;height: 100%; 
   /* the bottom margin is the negative value of the footer's height */
   margin: 0 auto -142px;
}
.footer, .push{
   height: 142px; /* .push must be the same height as .footer */
}

注:フッターとプッシュの高さを固定の高さに置き換えます。コンテナー内の行の後にプッシュ div を挿入することを忘れないでください。

score 0 · Accepted Answer

jedrus07の回答に対するあなたのコメントに応えて：

このすべてのソリューションは、中央の div をフッター div の後ろに展開します。各 div に独自のスペースしかないソリューションが必要です。

これを行う唯一の方法は、CSS 3 calc() を使用することです。非常に多くのブラウザーをサポートする必要がない場合、それはオプションです。実際のデモは次のとおりです。

http://jsfiddle.net/5QGgZ/3/

(Chrome または Safari を使用してください。)

HTML:

<html>
  <body>
    <div id='container'>
      <div id='rowOne'>row 1</div>
      <div id='rowTwo'>row 2</div>
      <div id='rowThree'>row 3</div>
    </div>
  </body>
</html>

CSS:

html, body, #container {
  height: 100%;
}
#rowOne {
  height: 50px;
  background: #f00;
}
#rowTwo {
  height: -webkit-calc(100% - 100px);
  background: #0f0;
}
#rowThree {
  height: 50px;
  background: #00f;
}

より広いブラウザーサポートが必要な場合は、jedrus07 が言及したものや Tom Sarduy の回答のようなスティッキーフッターソリューションを使用する必要があります。

score 0 · Accepted Answer

行を絶対に配置し、中央の行の上下にパディングを追加することで、これを偽造できます。テーブルで行っていたようにこれを行うことはできません

#container { position:relative; height:800px } // needs height

#rowOne, #rowTwo, #rowThree { position:absolute }

#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }

#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px

score 0 · Accepted Answer

CSS フレームワークを調べてみましたか? それらには、数分でそのようなものをセットアップするために使用できるデフォルトのクラスが付属しています。また、後で簡単に再設計できる、よりクリーンな html とインターフェイスを作成するのにも役立ちます。

http://twitter.github.com/bootstrap/index.html

score 0 · Accepted Answer

このコード行は役に立ちますか? デモ

これを試して：

#container{
   ...
   position:relative;
}
#content{
   min-height: xxx;
}

score 0 · Accepted Answer

1 つの方法は、Jquery を使用して、中央の div の最小の高さを画面の高さから、他の 2 つの div の高さ (100px) を差し引いた値に設定することです。

$(document).ready(function() {

    var screenHeight = $(document).height() - 100px;

    $('#rowTwo').css('min-height' , screenHeight);

});

score 0 · Accepted Answer

これはまさにあなたが望むことをするはずです:

html コード:

<div id="header">
    header
</div>
<div id='container'>
    <div id='rowOne'>one</div>
    <div id='rowTwo'>two</div>
    <div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
    footer
</div>

CSS コード:

.clearfix {
    clear: both;
}
#header, #footer {
    background-color: red;
}
#container {
    width: 100%;
}
#rowOne {
    width: 25%;
    background: green;
    float: left;
} 
#rowTwo {
    width: 55%;
    height: 100px;
    background: limegreen;
    float: left;
}
#rowThree {
    width: 20%;
    background: green;
    float: left;
}

jsFiddleでテストすることもできます

score 0 · Accepted Answer

私はあなたがこのように見えることを願っています:- DEMO

CSS

#container {
    height: 100%;
}

#rowOne {
    height: 50px;
    background: green;
    position:fixed;
    left:0;
    right:0;
}
#rowTwo {
    background: limegreen;
    min-height:500px;
    position:absolute;
    left:0;
    right:0;
    top:50px;
}
#rowThree {
    position: fixed;
    background: green;
    bottom:0;
    left:0;
    right:0;
    height:50px;
}

HTML

<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

css - 3行のCSSdivデザイン

10 に答える 10

HTML:

CSS

html コード:

CSS コード:

Related

Reference