Question

这是我的代码： CSS

*{
  margin: 0 auto;
  font-family: "Trebuchet MS", Arial, Verdana;
  font-size: 12px;
}
html {
  height: 100%;
}
body {
  height: 100%;
  min-height: 100%;
  position: relative;
  background-color: #f4f4f4;
}
#table {
  display: table;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
}
#table_cell {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  line-height: 1;
}
.glyphicon {
  position: absolute;
  padding: 11px 10px 10px 10px;
  pointer-events: none;
}
#username,
#password,
#mail {
  position: relative
}
#username-input,
#password-input {
  padding-left: 30px;
  display: inline-block!important;
  width: 270px!important;
  height: 37px!important;
}
footer {
  height: auto;
  width: 100%;
  bottom: 0;
  text-align: center;
  position: absolute;
  margin: 0 0 0 -15px;
  border-top: 1px solid #e7eaec;
  background-color: #ffffff;
}

HTML

<html>

<head>
</head>

<body>
  <div class="container">
    <div id="table">
      <div id="table_cell">
        <form name="login_form" id="login_form" method="post" action="">
          <img src="images/this.png" />
          <br/>
          <div id="username">
            <i class="glyphicon glyphicon-user"></i>
            <input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
          </div>
          <br/>
          <div id="password">
            <i class="glyphicon glyphicon-lock"></i>
            <input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
          </div>
          <br/>

          <span style="float:right;">
              <input type="submit" name="login" class="btn btn-default" value="Login" />
            </span> 
        </form>
      </div>
    </div>
    <footer>
      footer
      <br>footer

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

</html>

我正在努力处理我的页面布局我知道有一些类似的帖子，我尝试但看起来我的情况不同。
我的<div id=table>高度如何排除页脚？
如果可能的话，我不想设置高度数。感谢。

Answer 1

只需从position: absolute;移除footer。

修改

一个更好的解决方案是从body，#table和.container移除身高和最小高度并使用display:flex。

将以下css提供给.container

display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh;

* { margin: 0 auto; font-family: "Trebuchet MS", Arial, Verdana; font-size: 12px; } html { } body { position: relative; background-color: #f4f4f4; } #table { display: table; } .container { width: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; } #table_cell { display: table-cell; height: 100%; vertical-align: middle; text-align: center; line-height: 1; } .glyphicon { position: absolute; padding: 11px 10px 10px 10px; pointer-events: none; } #username, #password, #mail { position: relative } #username-input, #password-input { padding-left: 30px; display: inline-block!important; width: 270px!important; height: 37px!important; } footer { height: auto; width: 100%; bottom: 0; text-align: center; margin: 0 0 0 -15px; border-top: 1px solid #e7eaec; background-color: #ffffff; }

<html> <head> </head> <body> <div class="container"> <div id="table"> <div id="table_cell"> <form name="login_form" id="login_form" method="post" action=""> <img src="images/this.png" /> <br/> <div id="username"> <i class="glyphicon glyphicon-user"></i> <input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" /> </div> <br/> <div id="password"> <i class="glyphicon glyphicon-lock"></i> <input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" /> </div> <br/> <span style="float:right;"> <input type="submit" name="login" class="btn btn-default" value="Login" /> </span> </form> </div> </div> <footer> footer <br>footer </footer> </div> </body> </html>

Answer 2

添加此css

#table {
    display: table;
    height: calc(100% - 31px);
}

更改页脚的css

footer {
    background-color: #ffffff;
    border-top: 1px solid #e7eaec;
    bottom: 0;
    height: auto;
    text-align: center;
    width: 100%;
}

HTML：内容高度排除页脚

2 个答案: