3

http://designobvio.us/vodka/ライブデモ

HTML、コンテナ、メイン、100％を設定しましたが、スクロールバーなしで境界線を100％の高さにすることはできません。

どうすれば効果を得ることができますか？

HTML

  <div id="main">

  </div>

CSS（現在はライブコードではありませんが、これは私が試したものです）

html, body{height:100%; width:100%;} 
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}
4

5 に答える 5

2

デフォルトでは、ボーダー、マージン、およびパディングは幅/高さの一部ではなく、上に追加されます。そのため、ボックスの完全な寸法は高さと幅の 100% に境界線の幅を加えたものであるため、スクロールバーが表示されます。

box-sizingプロパティをに設定できますborder-box。これにより、幅/高さのプロパティに境界線とパディングの計算を含めるようブラウザに指示できます (content-boxデフォルト値である とは反対です)。

#main {
    box-sizing: border-box;
    [...]      
}

特に IE8 および他のブラウザー ファミリーの以前のバージョンはこの css-property をサポートしていないため、ブラウザー固有の定義もいくつか追加することをお勧めします。

#main {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing:     border-box;
    box-sizing:        border-box;
}

box-sizing の詳細については、 mozilla doku を参照してください。

于 2012-06-27T07:10:09.250 に答える
1

固定枠または動的枠をお探しですか? あなたのコードの問題は、W3C ボックス モデルです。デフォルトのモデルでは、要素のサイズにパディング、マージン、ボーダーが追加されます。したがって、コードで実際に言っているのは、「ボックスを 100% にしてから、10px 分の境界線を追加する」ということです。

通常、簡単な変更はボックス モデルを手動で切り替えることですが、残念ながら、そのプロパティは では適切に機能しませんheight: 100%。したがって、いくつかのオプションがあります。

1) 固定された境界線を探している場合、これは良いトリックです: http://css-tricks.com/body-border/ 2) 動的な境界線が必要な場合は、追加の高さボーダーが追加されます。1 つの方法を次に示します。

html,body { height:100%; padding: 0; margin: 0; }
#container {
    min-height:100%;
    border-right: 5px solid #000;
    border-left: 5px solid #000;
    position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
    height: 100px;
    border-top: 5px solid #000;
    background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
    height: 100px;
    border-bottom: 5px solid #000;
    background-color: blue;
    position: absolute;
    bottom: 0;
    width: 100%; /* with absolute position, a width must be declared */
}

HTML

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

jsfiddle はこちら: http://jsfiddle.net/Qw2cb/

于 2012-06-27T06:58:20.303 に答える
0

スクロールバーを表示したくないということですか？

CSS:

#main
{
    overflow: hidden;
    height: 100%;
    position: absolute;
    margin: 0px;
}
于 2012-06-27T03:08:55.820 に答える