0

我有一个页面，我想将我的 body 设置为 100%，这样它就不能占用屏幕大小，并且在 body 内部有一个 mainContainer div，它的重量和高度是 body 的 90%。

现在，每次我尝试在里面添加一个 div (LoginInnerContainer) 并希望 div 达到根 div 的 30% 并且在中间时，由于某种原因，主体变得更长，而内部容器没有进入中间。

为什么会发生这种情况，我该如何解决它，同时保持身体屏幕的大小？太糟糕了，我没有足够的声誉来发布图片来帮助理解我在说什么。

这是我的 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 回答