CSS　背景の下が切れないようにするには

11417 ワード
JSP Bootstrap3 SAStruts HTML CSS HTML テキストリンク

現在Java、Seasar2(SAStrats/S2JDBC)、JSP、PostgreSQLで
DBを使ったWebアプリケーションを作っています。

Bootstrap3でログイン画面を再構築しています。

そこで質問があるのですが
結論から言うと

画面の背景の下が切れないようにするにはどうしたらよいでしょうか？

次のように下の方に余白ができ不細工になってしまいます。

次のことを試しましたがうまくいきませんでした。

css
html , body {
min-height: 100%;
height: auto !important;
height: 100%;
}
css
body > .header{
  height: auto; /* 要素を超えた分の背景が伸びないブラウザ用 */
}

実際の現在のソースは次のようになっています。

login.jsp
<body>
<s:form action="verify">
<header id="top" class="header">
<div class="text-vertical-center">
<h1>Tennis DataBase</h1>
<br>
<div Align="center"><html:errors /></div>
<div Align="center"><html:text styleId="hoge" property="loginId" styleClass="form-control" style="width:250px;"/></div><br>
<div Align="center"><html:password styleId="hoge2" property="password"  styleClass="form-control" style="width:250px;"/></div><br>
<html:submit value="ログイン" styleClass="btn btn-dark btn-lg"/><br><br>
<s:link href="./registPage">アカウント登録はこちら</s:link>
</div>
</header>
</s:form>
</body>
css
html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 110%;
    background: url(../img/bg.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

CSSの問題以前にタグが邪魔していたりするのかもしれません。
もしわかる方がいれば教えて頂けるとうれしいです。

220118 TIL
JSONとXML言語