1

この質問と受け入れられた答えを参照して、私は同様のことを試みました。

.Content
{
 position:absolute;
 top:0;
 left:0;
 padding-top:75px;
 width:inherit;
 height:inherit;
}

.Header
{
 position:absolute;
 top:0;
 left:0;
 height:75px;
 width:inherit;
 background-color:Blue;
 text-align:center;
}

<form id="form1" runat="server" style="width:100%;height:100%">
 <div id="Content" class="Content">
  <div id="Header" class="Header">
   <h1 style="color:White">Report Portal</h1>
  </div>
 </div>
</form>

コンテンツ領域をページ全体に表示したいのですが、それ以上は必要ありません。ただし、上記のhtmlのWebページには垂直スクロールバーが表示されます。どうすれば修正できますか？

4

3 に答える 3

2

ヘッダーを絶対にしないでください。また、を削除してpadding-top: 75pxください。

このフィドルを考えてみましょう：リンク

編集：更新されたフィドル：リンク

于 2012-08-28T10:26:53.787 に答える
1

ボディとhmtlの幅と高さを100％に設定していますか？

また、パディングは垂直スクロールバーを作成しています。これを削除すると、期待どおりに機能します。

http://jsfiddle.net/Kyle_Sevenoaks/MqKXH/

于 2012-08-28T10:27:48.650 に答える
0

「コンテンツ」にHeight>inheritを設定しました。

CSSの継承（http://dorward.me.uk/www/css/inheritance/）

CSSの継承は、プロパティごとに機能します。ドキュメント内の要素に適用すると、値が「inherit」のプロパティは、親要素がそのプロパティに対して持っているのと同じ値を使用します。

全体として、「コンテンツ」の高さは、「フォーム」タグから継承されたブラウザの100％になっています。上からパディングを追加した後、つまり「75px」..その全高は「ブラウザの高さ+75px」になります。ページをスクロールする理由です。

解決策：1]「コンテンツ」への上部のパディングは避けてください。そのパディングをその内側のコンテナに与えます2]スタイルを使用します

body, html{
overflow:hidden;
}
于 2012-08-28T10:43:36.950 に答える