web-dev-qa-db-ja.com

メインコンテンツdivをcssで画面の高さを埋める方法

そのため、ヘッダー、メインボディ、フッターを含むWebページがあります。本体でページの100％を埋める（フッターとヘッダーの間に100％を埋める）ヘッダーをオーバーフローさせます。 top: 40で絶対位置にボディを設定すると（ヘッダーの高さが40pxになるため）、それは40pxをはるかに下回ってしまい、スクロールバーが作成されます。

実際のプロジェクトからページ/ CSS全体を実際に投稿できないため、単純なHTMLファイルを作成しました。サンプルコードでは、maincontentの本文が画面いっぱいに表示されていても、40pxをはるかに下回っています（ヘッダーのせいで）。

html, body{
margin: 0;
padding: 0;}

header{
height: 40px;
width: 100%;
background-color: blue;
}

#maincontent{
background-color: green;
height: 100%;
width: 100%;
}

footer{
height: 40px;
width: 100%;
background-color: grey;
  position: absolute;
    bottom: 0;
}

html

<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">

</div>

<footer></footer>
</body>
</html>

誰もが答えを知っていますか？

javascripthtmlcsshtml5css3
68
user2713516
  • ％単位の高さは必要ありません
  • jQueryは必要ありません

（！）bottom＆topを使用してdivをストレッチします：

.mainbody{
       position: absolute;
       top: 40px; /* Header Height */
       bottom: 20px; /* Footer Height */
       width: 100%;
    }

私のコードを確認してください： http://jsfiddle.net/aslancods/mW9WF/

108
sudhan kantharuban

Javascript、絶対配置、固定高さは必要ありません。

以下は、すべてのCSS/CSSのみの方法で、固定高さや絶対配置を必要としません：

CSS

.container { 
  display: table;
}
.content { 
  display: table-row; 
  height: 100%; 
}
.content-body { 
  display: table-cell;
}

HTML

<div class="container">
  <header class="header">
    <p>This is the header</p>
  </header>
  <section class="content">
    <div class="content-body">
      <p>This is the content.</p>
    </div>
  </section>
  <footer class="footer">
    <p>This is the footer.</p>
  </footer>
</div>

こちらで実際にご覧ください： http://jsfiddle.net/AzLQY/

この方法の利点は、フッターとヘッダーがコンテンツに合わせて大きくなり、本文が自動的に調整されることです。 CSSで高さを制限することもできます。

58
Mark Murphy

ビューポートの高さ/ビューポートの幅と呼ばれるCSSユニットがあります。

例

.mainbody{height: 100vh;}同様にhtml,body{width: 100vw;}

または90vh =ビューポートの高さの90％。

** IE9 +および最新のブラウザ。

45
joyBlanks

これにより、フォームの最小幅の中央に配置されたコンテンツ本文がおかしく崩れないようになります。

html {
    overflow-y: scroll;
    height: 100%;
    margin: 0px auto;
    padding: 0;
}

body {
    height: 100%;
    margin: 0px auto;
    max-width: 960px;
    min-width: 750px;
    padding: 0;
}
div#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}

div#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

div#pageContent {
    padding-bottom: 60px;
}

div#header {
    width: 100%;
}

そして、私のレイアウトページは次のようになります。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title></title>
</head>
<body>
<div id="wrapper">
        <div id="header"></div>
        <div id="pageContent"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

ここの例： http://data.nwtresearch.com/

もう1つの注意点として、追加したコードのようなページ全体の背景が必要な場合は、ラッパーdivからheight: auto !important;を削除します。 http://jsfiddle.net/mdares/a8VVw/

5
Matthew

top: 40pxとbottom: 40pxを使用して（フッターも40pxであると仮定）、高さを定義せずに、これを機能させることができます。

.header {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    background-color:red;
}
.mainBody {
    width: 100%;
    top: 40px;
    bottom: 40px;
    position: absolute;
    background-color: gray;
}
.footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: blue;
}

JSFiddle

3
Tricky12

Height：100％のような相対値は、参照のようにHTMLの親要素を使用します。高さの相対値を使用するには、htmlタグとbodyタグの高さを100％にする必要があります。

HTML

<body>
    <div class='content'></div>
</body>

CSS

html, body
{
    height: 100%;
}

.content
{
    background: red;
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/u91Lav16/1/

1
Adriano Moura

正確に何があなたの後にわからないが、私はそれを得ると思う。

ヘッダー-画面の上部に留まりますか？フッター-画面の下部に留まりますか？コンテンツ領域->フッターとヘッダーの間のスペースに収まりますか？

これは、絶対配置または固定配置で行うことができます。

絶対配置の例を次に示します。 http://jsfiddle.net/FMYXY/1/

マークアップ：

<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>

CSS：

.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }

最適に動作させるには、ピクセルではなく％を使用することをお勧めします。異なる画面/デバイスサイズで問題が発生する可能性があるためです。

1
TyMayn

さて、ブラウザごとに異なる実装があります。

私の考えでは、最もシンプルでエレガントなソリューションはCSS calc（）を使用することです。残念ながら、このメソッドはie8以下では使用できず、Androidブラウザーおよびモバイルオペラでも使用できません。ただし、そのために別の方法を使用している場合は、これを試すことができます： http://jsfiddle.net/uRskD/

マークアップ：

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
    min-height: calc(100% - 40px);
}

私の2番目の解決策は、スティッキーフッターメソッドとボックスサイズ設定です。これにより、基本的にbody要素が親の100％の高さを埋めることができ、box-sizing: border-box;でその100％にパディングが含まれます。 http://jsfiddle.net/uRskD/1/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#footer {
    background: #f0f;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#body {
    background: #0f0;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

3番目の方法は、jQueryを使用してメインコンテンツ領域の最小高さを設定することです。 http://jsfiddle.net/uRskD/2/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
}

そして、JS：

$(function() {
    headerHeight = $('#header').height();
    footerHeight = $('#footer').height();
    windowHeight = $(window).height();
   $('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
1
Chad

これは簡単な問題のように聞こえるかもしれませんが、実際にはそうではありません！

私はあなたが純粋なCSSでやろうとしていることを達成するために多くのことを試みましたが、私の試みはすべて失敗でした。しかし.. javascriptまたはjqueryを使用する場合、可能な解決策があります！

このCSSがあると仮定します。

#myheader {
    width: 100%;
}
#mybody {
    width: 100%;
}
#myfooter {
    width: 100%;
}

このHTMLがあると仮定します。

<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>

Jqueryでこれを試してください：

<script>
    $(document).ready(function() {
        var windowHeight = $(window).height();/* get the browser visible height on screen */
        var headerHeight = $('#myheader').height();/* get the header visible height on screen */
        var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
        var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
        var newBodyHeight = windowHeight - headerHeight - footerHeight;
        if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
            $('#mybody').height(newBodyHeight);
        }
    });
</script>

注：このソリューションでは絶対位置を使用していません。モバイルブラウザでは見苦しいかもしれません。

0
evilReiko