3

私のHTML：

div.container

私のCSS：

html, body {
  height: 100%;
  background-color: red;
  padding-left: 0px;
  padding-right: 0px;
}    
.container {
  height: 100%;
  background-color: blue;
  margin-top: 5px;
  *zoom: 1;
}

height = 100％を使用したいのですが、overflow=hiddenを使用したくありません。

垂直スクロールバーを作成しないコンテナdivのマージントップの効果を得るには、上記でどのCSSプロパティを使用する必要がありますか。

ただ想像します：

* Body with color red
* A div container in body and I want to see the margin of "x" px on top bewteen body and conatiner
* Color of div container blue
* No scrollbars and No overflow="hidden"

助けてください

どうすればこれを達成できますか？助けてください

4

3 に答える 3

5

このCSSを試してください

*{
    margin:0;
    padding:0;
}
html, body {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height: 100%;
    background-color: red;
    padding-top:5px;
}    
.container {
    height: 100%;
    background-color: blue;
    *zoom: 1;
}

まず、すべてのマージンとパディングをリセットします。
box-sizing:border-box;つまり、要素にいくらパディングを追加しても、要素のサイズは同じままです。

赤いバーに絶対位置のdivを使用することもできます。

HTML

<div class="red-bar"></div>
<div class="content"></div>

CSS 

.red-bar{ position:absolute; width:100%; height:5px; top:0; background:red; }
.content{ height:100%; background:blue; }
于 2012-06-09T19:30:08.773 に答える
4

別の解決策が使用されていpadding-topますmargin-top

于 2014-02-18T08:59:56.377 に答える
0

あなたのマージンがあなたのdivを上に押し上げているので、そして全体の高さを増やすよりも。css2で実行できるトリックは、コンテナdivを別のdivでラップし、左または右にフロートさせることです。フロート要素は一般にその親要素をプッシュしないためです。そしてそれに100％の幅を与えます。その後、それをクリアします。最終的なコードは次のようになります...

マークアップ

<div class="wrap">
 <div class="container">
  &nbsp;
 </div>
</div>
<div class="clear"></div>

とスタイル

html, body {
  height: 100%;
  background-color: red;
  padding-left: 0px;
  padding-right: 0px;
  margin:0;
}    
.container {
  height: 50%;
  background-color: blue;
  margin-top: 5px;
  *zoom: 1;
}
.wrap{height:auto;float:left;width:100%;}
.clear{clear:both}
于 2012-06-09T19:37:26.423 に答える