1

ページに 2 つの div を作成しました。1 つはヘッダー、もう 1 つはコンテンツです。

   <div id="main"> 
    <div id="header">
    </div>
    <div id="content"> 
    </div>
   </div>

そしてそのスタイルは

<style>
#main{
height:100%;
}
#header{
height:100px
}

#content{
height:???? // to fit the content 100% on any kind of screen 
}
</style>

画面に合わせて内容を調整したい。画面の高さは 100px にすることも、2000px にすることもできます。cssでそれを行う方法。下部の空白やページをスクロールしたくない

4

5 に答える 5

2

CSS3を使用して問題がない場合は、次のコードを使用します。

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main{
    height:100%;
    background-color: blue;
}

#header{
    height: 10%;
    background-color: green;
}

#content{
    height: -webkit-calc(100% - 105px);
    background-color: red;
}

クロームでトリックを行います。calc他のブラウザのプロパティの代替をテストする必要があります。希望する効果を正確に得るには、親要素のマージンとパディングを試す必要がありますが、これがアイデアです。

CSS3がオプションでない場合、私より賢い誰かがあなたにもっと良い選択肢を与えることができない限り、あなたはパーセントであなたのヘッダーを定義しなければならないでしょう:)。

于 2012-12-10T10:32:49.523 に答える
1

CSS を使用してこのレイアウトが必要な場合は、これらを確認する必要があります。

display: box;

また

height: calc(100% - 100px);

ただし、これらは古いブラウザではサポートされていません。display: box は ie9 では動作しません。

いくつかのJavaScriptもそうです。

document.getElementById('content').style.height = (document.getElementById('main').clientHeight - 100) + "px";

body の onload イベントでこれを呼び出します。

于 2012-12-10T10:36:16.863 に答える
1

これらの行を追加します

             html,body{height:100%;}.

             #main{height:100%; }
             #header{height:100px; background:#ccc; }
             #content{min-height:90%; background:#666; }​

これにより、画面で調整することができます

于 2012-12-10T10:36:42.480 に答える
0

CSSでこれを試してください

html, body {  height: 100%;   }
#main{height:100%; overflow:hidden}
#header{height:100px; background:green; }
#content{height:100%; background:#F00; overflow:auto; }​

ここにフィドルリンクがあります

于 2012-12-10T10:41:59.847 に答える
0

Add html, body { height: 100%; } and use position:absolute

Let both the inner div has position:absolute and it should starts from the top of the browser. Use z-index to switch the divs.

HTML 

<div id="main"> 
    <div id="header">c
    </div>
    <div id="content">
       <div class="hidden">This div helps to push the content 100px below</div>
        cxbvbvbvcbv
    </div>
   </div>​

CSS

html, body {  height: 100%;   }
#main{height:100%; position:relative}
#header{height:100px; background:green; position:absolute; top:0; left:0; width:100%; z-index:1000}
#content{height:100%; background:grey; position:absolute; top:0; left:0; width:100%; z-index:1; }​

DEMO Updated

于 2012-12-10T10:30:19.650 に答える