使用高度100％将元素抛出屏幕

时间：2018-05-02 16:53:04

标签： html css flexbox height

我目前正在创建单页面应用程序。在它上面我需要一切都始终在屏幕上。

但是当显示这些卡片时，它们的顶部会离开屏幕并且不会出现。如果我将高度100％关闭，这一切都会出现，但内容不再是屏幕上的中心...... 

html,

.leofullscreen {
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-signin {
      width: 100%;
      max-width: 330px;
      padding: 15px;
      margin: 0 auto;
  }

#randomizingOptions {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}
<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>MARGRIT</title>
    <link rel="stylesheet" href="/css/home.css"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

<div class="leofullscreen">

<div class="text-center container">

<div id="classesContainer">
    <form id="classesTestDataForm">

        <div id="classesCards" class="card-columns">

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                    <h5 class="methodName card-title text-left card-header">checkUser</h5>

                    <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                    <div class="parameter form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                        </div>
                            <input hidden="true" class="parameterId" name="id" value="4"/>
                    </div>

                    <div class="parameter form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                        </div>
                            <input hidden="true" class="parameterId" name="id" value="5"/>
                    </div>
                        </div>

                    <div class="returnType card-footer">
                        <h6 class="text-left">Expected return value</h6>
                        <div class="form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                        </div>
                        </div>
                    </div>

                    </div>

                </div>


            </div>

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                        <h5 class="methodName card-title text-left card-header">checkUser</h5>

                        <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="4"/>
                            </div>

                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="5"/>
                            </div>
                        </div>

                        <div class="returnType card-footer">
                            <h6 class="text-left">Expected return value</h6>
                            <div class="form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>


            </div>

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                        <h5 class="methodName card-title text-left card-header">checkUser</h5>

                        <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="4"/>
                            </div>

                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="5"/>
                            </div>
                        </div>

                        <div class="returnType card-footer">
                            <h6 class="text-left">Expected return value</h6>
                            <div class="form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>


            </div>

        </div>

        <input class="btn btn-lg btn-primary btn-block" type="submit" value="Submit" id="sumbitClassesTestData"/>

    </form>
</div>

</div>
</div>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

您需要删除justify-content:center;规则，并最终为100vh设置height值为html, .leofullscreen，以避免将元素设置在中心但每边都溢出： （

如果满足您的要求，请参阅下面的示例。

html,

.leofullscreen {
    width: 100%;
    height: 100vh;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

.container {
    height: 100%;
    display: flex;
    align-items: center;/* this is also comming in the way !!!! */
}

.form-signin {
      width: 100%;
      max-width: 330px;
      padding: 15px;
      margin: 0 auto;
  }

#randomizingOptions {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}
<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>MARGRIT</title>
    <link rel="stylesheet" href="/css/home.css"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

<div class="leofullscreen">

<div class="text-center container">

<div id="classesContainer">
    <form id="classesTestDataForm">

        <div id="classesCards" class="card-columns">

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                    <h5 class="methodName card-title text-left card-header">checkUser</h5>

                    <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                    <div class="parameter form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                        </div>
                            <input hidden="true" class="parameterId" name="id" value="4"/>
                    </div>

                    <div class="parameter form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                        </div>
                            <input hidden="true" class="parameterId" name="id" value="5"/>
                    </div>
                        </div>

                    <div class="returnType card-footer">
                        <h6 class="text-left">Expected return value</h6>
                        <div class="form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                        </div>
                        </div>
                    </div>

                    </div>

                </div>


            </div>

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                        <h5 class="methodName card-title text-left card-header">checkUser</h5>

                        <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="4"/>
                            </div>

                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="5"/>
                            </div>
                        </div>

                        <div class="returnType card-footer">
                            <h6 class="text-left">Expected return value</h6>
                            <div class="form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>


            </div>

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                        <h5 class="methodName card-title text-left card-header">checkUser</h5>

                        <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="4"/>
                            </div>

                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="5"/>
                            </div>
                        </div>

                        <div class="returnType card-footer">
                            <h6 class="text-left">Expected return value</h6>
                            <div class="form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>


            </div>

        </div>

        <input class="btn btn-lg btn-primary btn-block" type="submit" value="Submit" id="sumbitClassesTestData"/>

    </form>
</div>

</div>
</div>
</body>

</html>

您也可以使用html / leofullscreen作为弹性容器

html,
.leofullscreen {
  width: 100%;
  bottom: 0px;
  top: 0px;
  left: 0;
  position: absolute;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  margin: auto;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

#randomizingOptions {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <title>MARGRIT</title>
  <link rel="stylesheet" href="/css/home.css" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

  <div class="leofullscreen">

    <div class="text-center container">

      <div id="classesContainer">
        <form id="classesTestDataForm">

          <div id="classesCards" class="card-columns">

            <div class="classContainer card">

              <div class="className card-header">
                <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
              </div>

              <div class="card-body method">

                <div class="card border-warning">
                  <h5 class="methodName card-title text-left card-header">checkUser</h5>

                  <input hidden="true" class="methodId" name="id" value="2" />

                  <div class="card-body">
                    <h6 class="text-left">Parameters</h6>
                    <div class="parameter form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value" />
                      </div>
                      <input hidden="true" class="parameterId" name="id" value="4" />
                    </div>

                    <div class="parameter form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value" />
                      </div>
                      <input hidden="true" class="parameterId" name="id" value="5" />
                    </div>
                  </div>

                  <div class="returnType card-footer">
                    <h6 class="text-left">Expected return value</h6>
                    <div class="form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value" />
                      </div>
                    </div>
                  </div>

                </div>

              </div>


            </div>

            <div class="classContainer card">

              <div class="className card-header">
                <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
              </div>

              <div class="card-body method">

                <div class="card border-warning">
                  <h5 class="methodName card-title text-left card-header">checkUser</h5>

                  <input hidden="true" class="methodId" name="id" value="2" />

                  <div class="card-body">
                    <h6 class="text-left">Parameters</h6>
                    <div class="parameter form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value" />
                      </div>
                      <input hidden="true" class="parameterId" name="id" value="4" />
                    </div>

                    <div class="parameter form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value" />
                      </div>
                      <input hidden="true" class="parameterId" name="id" value="5" />
                    </div>
                  </div>

                  <div class="returnType card-footer">
                    <h6 class="text-left">Expected return value</h6>
                    <div class="form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value" />
                      </div>
                    </div>
                  </div>

                </div>

              </div>


            </div>

            <div class="classContainer card">

              <div class="className card-header">
                <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
              </div>

              <div class="card-body method">

                <div class="card border-warning">
                  <h5 class="methodName card-title text-left card-header">checkUser</h5>

                  <input hidden="true" class="methodId" name="id" value="2" />

                  <div class="card-body">
                    <h6 class="text-left">Parameters</h6>
                    <div class="parameter form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value" />
                      </div>
                      <input hidden="true" class="parameterId" name="id" value="4" />
                    </div>

                    <div class="parameter form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value" />
                      </div>
                      <input hidden="true" class="parameterId" name="id" value="5" />
                    </div>
                  </div>

                  <div class="returnType card-footer">
                    <h6 class="text-left">Expected return value</h6>
                    <div class="form-inline">
                      <div class="form-group mb-2">
                        <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean" />
                      </div>
                      <div class="form-group mx-sm-3 mb-2">
                        <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value" />
                      </div>
                    </div>
                  </div>

                </div>

              </div>


            </div>

答案 1 :(得分：0)

如果您从0px移除底部：html, .leofullscreen，它也应该可以正常工作。

html,
.leofullscreen {
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    position: absolute;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-signin {
      width: 100%;
      max-width: 330px;
      padding: 15px;
      margin: 0 auto;
  }

#randomizingOptions {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}
<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>MARGRIT</title>
    <link rel="stylesheet" href="/css/home.css"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

<div class="leofullscreen">

<div class="text-center container">

<div id="classesContainer">
    <form id="classesTestDataForm">

        <div id="classesCards" class="card-columns">

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                    <h5 class="methodName card-title text-left card-header">checkUser</h5>

                    <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                    <div class="parameter form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                        </div>
                            <input hidden="true" class="parameterId" name="id" value="4"/>
                    </div>

                    <div class="parameter form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                        </div>
                            <input hidden="true" class="parameterId" name="id" value="5"/>
                    </div>
                        </div>

                    <div class="returnType card-footer">
                        <h6 class="text-left">Expected return value</h6>
                        <div class="form-inline">
                        <div class="form-group mb-2">
                            <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                        </div>
                        </div>
                    </div>

                    </div>

                </div>


            </div>

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                        <h5 class="methodName card-title text-left card-header">checkUser</h5>

                        <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="4"/>
                            </div>

                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="5"/>
                            </div>
                        </div>

                        <div class="returnType card-footer">
                            <h6 class="text-left">Expected return value</h6>
                            <div class="form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>


            </div>

            <div class="classContainer card">

                <div class="className card-header">
                    <h1 class="h3 mb-3 font-weight-normal">ServletForgotPassword</h1>
                </div>

                <div class="card-body method">

                    <div class="card border-warning">
                        <h5 class="methodName card-title text-left card-header">checkUser</h5>

                        <input hidden="true" class="methodId" name="id" value="2"/>

                        <div class="card-body">
                            <h6 class="text-left">Parameters</h6>
                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="String : username"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#4" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="4"/>
                            </div>

                            <div class="parameter form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="parameter" value="int : userId"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="parameterValue" class="form-control parameterValue" id="parameter#5" placeholder="Value"/>
                                </div>
                                <input hidden="true" class="parameterId" name="id" value="5"/>
                            </div>
                        </div>

                        <div class="returnType card-footer">
                            <h6 class="text-left">Expected return value</h6>
                            <div class="form-inline">
                                <div class="form-group mb-2">
                                    <input type="text" readonly="true" class="form-control-plaintext" id="returnType" value="Boolean"/>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <input type="text" name="expectedReturnValue" class="form-control expectedReturnValue" placeholder="Value"/>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>


            </div>

        </div>

        <input class="btn btn-lg btn-primary btn-block" type="submit" value="Submit" id="sumbitClassesTestData"/>

    </form>
</div>

</div>
</div>
</body>

</html>

如果没有必要，我会在position: absolute上使用container重新考虑。

相关问题
最新问题