20

ヘッダー、コンテンツ、フッターのあるページがあります。ヘッダーとフッターの高さは固定されているので、ヘッダーとフッターの間に動的に収まるようにコンテンツの高さを調整してください。コンテンツに背景画像を配置することを計画しているので、それが空いている垂直スペースの残りの部分を実際に埋めることが重要です。

スティッキーフッターアプローチを使用して、フッターがページの下部に残るようにしました。ただし、これによってコンテンツが残りのスペースの高さ全体に広がるわけではありません。

追加を伴ういくつかの解決策を試しましheight:100%, height:auto; position:relativeたが、うまくいきませんでした。

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#wrapper #content {
  background-color: pink;
  width: 400px;
  height: 100%;
  margin: 0 0 -30px 100px;
  padding: 25px 30px 25px 30px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}
<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

4

6 に答える 6

8

height：100％の秘訣は、すべての親コンテナにも高さを設定する必要があるということです。これがhtmlの例です

<html>
  <body>
    <div id="container">
    </div>
  </body>
</html>

高さを100％に設定したコンテナdivをウィンドウの高さまで動的に拡張するには、body要素とhtml要素の高さも100％に設定されていることを確認する必要があります。それで...

html
{
    height: 100%;
}
body
{
    height: 100%;
}
#container
{
    height: 100%;
}

あなたの窓に合うように拡張するコンテナをあなたに与えるでしょう。次に、このウィンドウの上に浮かぶフッターまたはヘッダーが必要な場合は、zインデックスを使用して行うことができます。これは、垂直方向の高さを動的に埋める、私が見つけた唯一のソリューションです。

于 2014-03-23T17:18:40.643 に答える
7

cssを次のように変更してみてください。

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#content {
  background-color: pink;
  width: 400px;
  padding: 25px 30px 25px 30px;
  position: absolute;
  bottom: 30px;
  top: 150px;
  margin-left: 100px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}
<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

おそらく、幅、パディング、マージンなどを設定したくないでしょう。ラッパーの。また、絶対配置を使用すると、コンテンツの下部と上部を目的の場所に移動できます。

これがあなたが求めているものだと思います。

于 2012-05-05T19:00:00.667 に答える
6

私はもう少し一般的な解決策を提供しているので、この回答を読んで、それを自分のサイトに適用する方法を考えている他の人にとってより便利です。

3つのdivがあると仮定します。

<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>

ここで、＃headerは固定されており、高さが可変である可能性があります。＃contentsは残りのすべての垂直スペースを消費する必要があり、＃footerは固定されており、高さが可変である可能性があります。

/* Note you could add a container div instead of using the body */
body {
  display: flex;
  flex-direction: column;
}
#header {
  flex: none;
}
#contents {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
}
#footer {
  flex: none;
}

これにより、コンテンツを垂直方向にスクロールして、コンテンツ全体を表示できるようになることに注意してください。

display：flexの詳細については、こちらをご覧ください。

于 2015-03-19T23:50:50.987 に答える
5

私もこれを理解するために数時間を費やし、最終的にハックのない堅牢なソリューションを手に入れました。ただし、CSS3が必要であり、CSS3をサポートするには最新のブラウザが必要です。したがって、この制約が機能する場合は、機能する実際のソリューションがあります。

http://jsfiddle.net/u9xh4z74/ JSFiddleは実際にはフレックスボックスを埋め込みコードとして正しくレンダリングしないため、証明が必要な場合は、このコードを独自のファイルにコピーしてください。

基本的に、次のことを行う必要があります-ターゲットコンテナを100％の高さに設定します。これはすでに知っているようです-設定した親コンテナdisplay：flexおよびflex-direction：vertical（JSFiddleにも表示されます。同じことを行うが、クロスブラウザのサポートに必要な代替スタイル）-ヘッダーとフッターを自然な高さにすることができ、その点で何も指定する必要はありません-残りのスペースを埋めたいコンテナで、設定しますフレックス：1。準備完了です。意味的に意図したとおりに機能することがわかります。また、JSFiddleには、overflow：autoを含めて、画面で処理できるよりも多くのテキストがある場合に、スクロールが希望どおりに機能することを示しています。

<div style="display:flex; flex-direction:vertical;">
    ...header(s)...
    <div style="flex: 1; overflow: auto;">
         As much content as you want.
    </div>
    ...footer(s)...
</div>

ちなみに、私はdisplay：tableを使用してこれと同じことをしようとするオプションを追求しました。オーバーフローしたコンテンツが期待どおりに機能しないことを除いて、それも問題なく機能します。代わりに、オーバーフローしたコンテンツは、コンテナーをコンテンツのサイズに拡張するだけです。これは、あなたが望むものではないと確信しています。楽しみ！

于 2015-02-20T07:49:33.127 に答える
1

display：tableとdisplay：table-rowを使用します。通常のdivにはheight：0を設定し、垂直方向のスペースを埋めるdivにはheight：autoを設定します。{height：100％;でdivを挿入します。コンテナの高さが事前設定された高さを超えて拡大しないようにするために、overflow-y：auto}を垂直フィラーに挿入します。display：tableの力を見よ！

<div style="height:300px;">
  <div style="display:table; height:100%; width:100%;border: 1px solid blue;">
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Hello          
    </div>
    <div style="display: table-row; height:auto; padding:2px; background-color:green;">
      <div style="height:100%; overflow: auto;">
        <div style="height: 500px"></div>
      </div>
    </div>
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Gbai
    </div>
  </div>
</div>
于 2016-05-26T13:44:58.517 に答える
-5

100％の大陸の高さから正確に100％の高さはありません。この方法で解決することはできません。同様に、高さ+マージン+パディングの組み合わせを使用している場合。これは地獄への道です。このページレイアウトを気に入っているチュートリアルを探すことをお勧めします。

于 2012-05-05T18:29:36.210 に答える