1

私は現在http://grapevineiow.org/m_inspireblog.htmlでウェブサイトを構築しています。この Web サイトには、ヘッダーとフッターがあります。上記でリンクしたページには、iframe. 明らかに、ブログは 1 つの連続したコンテンツとしてページに収めるには長すぎるため、スクロールバーが必要です。

ただし、ここで問題が発生します。ブログにスクロールバーを残しておきたい (ユーザーがスクロールできるようにするため) が、ヘッダーとフッターが必要最小限のスペースしか占有しないように、ページをウィンドウいっぱいに表示したい. ヘッダーは問題ありませんが、フッターが問題です。

私が試してみました：

  • と の高さを CSS で設定bodyしhtmlます100%。
  • の高さを CSS で設定しましたcontentが100%、contentウィンドウがいっぱいになりました。
  • height:auto 0CSSのようにフッターのスタイルを設定します。

...しかし、これらのどれも機能していません。

可能であれば CSS だけを使用してこの問題を解決できるようにしたいと考えていますが、必要に応じて HTML を使用することもできます。Javascriptは避けたいです。

前もって感謝します。

4

1 に答える 1

1

ヘッダーとフッターの高さがわかっている場合は、次のように中央領域の上部と下部の両方を設定することでこれを実現できます。

<style type="text/css">
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#header{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background: #f09;
}
#content{
    position: absolute;
    width: 100%;
    top: 100px;
    bottom: 100px;
    background: #f90;
}
#content iframe{
    width: 100%;
    height: 100%;
}
#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #90f;
}
</style>

<div id="header"></div>
<div id="content">
    <iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>
于 2012-09-05T15:54:49.180 に答える