0

ページがあり、ボディを 100% に設定して、画面サイズを取得できないようにしたいと考えています。ボディ内には、重量と高さがボディの 90% である mainContainer div があります。

さて、内部に div (LoginInnerContainer) を追加しようとするたびに、ルート div の 30% と中間に div を配置したいのですが、なぜか本体が長くなり、内部コンテナーが中間に収まりません。

本体を画面のサイズに保ちながら、なぜこれが起こっているのか、どうすれば解決できるのでしょうか? 残念ながら、私が言っていることを理解するのに役立つ写真を投稿するほどの評判はありません.

ここに私のHMTLコードがあります

<html>
          <head>
             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              <link rel="stylesheet" href="<?php URL?> public/css/default.css">
              <title></title>
           </head>
           <body>
             <div id="mainContainer">
                 <header>

                </header>

                     <div id="loginInnerContainer">
                          <div id="loginLogoContainer"></div>
                          <div id="loginFormContainer"></div>
                     </div>
            </body>
 </html>

これまでのところ私のCSSがありますが、#loginInnerContainerが途中で取得され、ページが必要以上に長くなります。

#mainContainer { 
/*    height: 590px;*/
    height: 90%;
    width: 90%;
    background-color: white;
    margin: 50px;

}
html, body{
    height: 100%;
}

html {
    background-image:url('../images/wood-dark.png');
    height: 100%;
}
body {
    width: 100%;
    min-height:100%;
    display: block;

}
#loginMainContainer{
    height: 100%;
    padding:auto 0;
}

#loginInnerContainer{
    background-color:blue;
    width: 100%;
    height: 30%;
    margin:auto 0 auto 0;

}
4

1 に答える 1

0

まず、ページ全体のマージンとパディングをリセットします。

*
{
  margin: 0;
  padding: 0;
}

詳細情報.
このようにして、デフォルトのパディングとマージンがリセットされます。

次は、#loginInnerContainer にマージンを使用していることです。マージンは常にコンテナの外側にあります。これにはパディングを使用します。詳細はこちら。
ページは必要に応じて大きくなりますが...

これは、パディングによってコンテナも拡張されるためです。
これを除外するには、 を使用できますbox-sizing。
パディングに注意を払うことなく、幅と高さを画面の 100% に設定することもできます。

jsFiddle

これがお役に立てば幸いです:)

于 2013-10-03T13:47:38.943 に答える