Question

我有一个页面，我想将我的身体设置为100％所以它不能占用屏幕尺寸，并且在体内有一个mainContainer div，它的重量和高度是身体的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;

}

Answer 1

首先，我会重置整个页面的边距和填充：

*
{
  margin: 0;
  padding: 0;
}

More info。
这样一些默认的填充和边距将被重置。

接下来就是你正在为#loginInnerContainer使用保证金。保证金始终位于容器外部，您希望使用填充。更多信息here。
虽然页面仍然会根据需要变大......

这是因为你的填充也会扩展容器。如果要排除此项，您可以使用box-sizing。
现在您还可以将宽度和高度设置为屏幕的100％，而无需注意填充。

的 jsFiddle

希望这有助于你：）

css即使我添加元素，如何使页面主体保持相同的大小？

1 个答案: