页脚语义 UI

Question

嗨，这是我第一次使用 semantic-ui 框架，我在页脚方面遇到了一些问题。我想让页脚始终固定在页面底部（不固定）。

这是我的简单html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <nav class="ui borderless menu">
    </nav>

    <div class="desc">
    </div>

    <div class="ui container">
    </div>

    <div class="ui container">
    </div>

    <footer class="footer">
    </footer>
</body>
</html>

我正在尝试使用这个 css:

body {
    position: relative;
    height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

但它不起作用，它只在页面高度小于显示器高度的 100% 时起作用，当它的高度超过显示器高度的 100% 时，页脚将像这样浮动：

我也已经将 css body 更改为： body{ 位置：相对； min-height：100%； }

但还是不行，谁能帮忙？

这是完整的代码，我列了一个长列表 table 所以你会知道当你点击过滤器时它会把 table 下推，页脚会乱七八糟。

body {
  height: 100%;
  color: #696F84;
  position: relative;
}
.menu {
  border-radius: 0 !important;
}
.item {
  color: #696F84 !important;
}
.logo {
  margin-right: 7px !important;
}
.company {
  font-family: 'Righteous', cursive;
  font-weight: normal;
  font-size: 27px;
  color: #515151;
  padding-bottom: 2px;
}
.desc {
  position: relative;
  background-color: #EEEEEE;
  margin-top: -1rem;
  padding: 30px 0;
  font-family: Raleway;
  font-size: 24px;
  color: #757575;
}
#filter {
  width: 100%;
  margin: 20px 0;
}
.footer {
  background-color: #212121;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
}

<link href="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.js"></script>

<nav class="ui borderless menu">
  <div class="header item">
    <img class="logo" src="./img/logo.jpg" alt="logo">
    <div class="company">Company Name</div>
  </div>
  <!-- end left menu -->

</nav>
<!-- end navbar -->

<div>
  <div class="ui container">
    <p>"Description here | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."</p>
  </div>
</div>
<!-- end description -->

<div class="ui container">
  <div class="ui styled accordion" id="filter">
    <div class="title">
      <i class="dropdown icon"></i>
      Filter
    </div>
    <div class="content">
      <div class="ui grid">
        <div class="four wide column" id="radio">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="small">
                  <label>Small</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="medium">
                  <label>Medium</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="large">
                  <label>Large</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="x-large">
                  <label>X-Large</label>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end radio -->
        <div class="four wide column" id="checkbox">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="small">
                  <label>Red</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="medium">
                  <label>Orange</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="large">
                  <label>Green</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="x-large">
                  <label>Blue</label>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end checkbox -->
        <div class="eight wide column" id="input">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui labeled input">
                  <div class="ui label">
                    Name
                  </div>
                  <input type="text" placeholder="your name">
                </div>
              </div>
              <div class="field">
                <div class="ui selection dropdown">
                  <input type="hidden" name="gender">
                  <i class="dropdown icon"></i>
                  <div class="default text">Gender</div>
                  <div class="menu">
                    <div class="item" data-value="1">Male</div>
                    <div class="item" data-value="0">Female</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end input -->
      </div>
      <!-- end grid -->
    </div>
    <!-- end content -->
  </div>
  <!-- end accordion -->

  <table class="ui blue celled striped compact table">
    <thead>
      <tr>
        <th class="collapsing">No</th>
        <th>Food</th>
        <th>Code</th>
        <th>Calories</th>
        <th>Protein</th>
        <th class="center aligned collapsing">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="collapsing">1</td>
        <td>Apples</td>
        <td>Ap</td>
        <td>200</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">2</td>
        <td>Orange</td>
        <td>Or</td>
        <td>310</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">3</td>
        <td>Mango</td>
        <td>Mg</td>
        <td>360</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
    </tbody>
  </table>
  <!-- end table -->
</div>
<!-- end container -->

<footer class="footer">
  Micro Tech 2015. All Rights Reserved
</footer>

<script type="text/javascript">
  $(document).ready(function() {
    $('.ui.accordion').accordion();
  })
</script>

Answer 1

刚刚设置

.footer{
 position:fixed;
 bottom:0;
}

在这种情况下，固定位置是将页脚始终放在底部的最佳方式。

Answer 2

OP 表示他不想要固定的页脚

这是导致您出现问题的原因：

body, html {
    height: 100%;
}

height 不应将页脚设置为底部（它来自 semantic.min.css）。

要取消它，请在您的 CSS 样式表的开头添加它（此处需要 !important 来覆盖其他样式表设置的值，否则您应该 不惜一切代价避免使用它):

body, html {
  height: auto!important;
}

body {
  font-size: 40px;
  position: relative;
}

.footer {
  background-color: black;
  color: red;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

<nav class="ui borderless menu">
</nav>

<div class="desc">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="ui container">
</div>

<div class="ui container">
</div>

<footer class="footer">
  some footer at the bottom
</footer>

Answer 3

像下面一样添加扭曲 div

<div class="main">
  .......
</div>

<div class="footer">
 ......
</div>

并设置css

.main{min-height:100%; 
      padding-bottom:60px; 
      box-sizing:border-box;}
.footer {
  background-color: #212121;
  position: absolute;
  /* bottom: 0;  remove this */
  margin-top: -50px; /* add this */
  left: 0;
  width: 100%;
  padding: 15px 0;
}

body {
  height: 100%;
  color: #696F84;
  position: relative;
}
.menu {
  border-radius: 0 !important;
}
.item {
  color: #696F84 !important;
}
.logo {
  margin-right: 7px !important;
}
.company {
  font-family: 'Righteous', cursive;
  font-weight: normal;
  font-size: 27px;
  color: #515151;
  padding-bottom: 2px;
}
.desc {
  position: relative;
  background-color: #EEEEEE;
  margin-top: -1rem;
  padding: 30px 0;
  font-family: Raleway;
  font-size: 24px;
  color: #757575;
}
#filter {
  width: 100%;
  margin: 20px 0;
}
.main{min-height:100%; padding-bottom:60px; box-sizing:border-box;}
.footer {
  background-color: #212121;
  position: absolute;
  /* bottom: 0;  remove this */
  margin-top: -50px; /* add this */
  left: 0;
  width: 100%;
  padding: 15px 0;
}

<link href="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.js"></script>
<div class="main">
<nav class="ui borderless menu">
  <div class="header item">
    <img class="logo" src="./img/logo.jpg" alt="logo">
    <div class="company">Company Name</div>
  </div>
  <!-- end left menu -->

</nav>
<!-- end navbar -->

<div>
  <div class="ui container">
    <p>"Description here | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."</p>
  </div>
</div>
<!-- end description -->

<div class="ui container">
  <div class="ui styled accordion" id="filter">
    <div class="title">
      <i class="dropdown icon"></i>
      Filter
    </div>
    <div class="content">
      <div class="ui grid">
        <div class="four wide column" id="radio">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="small">
                  <label>Small</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="medium">
                  <label>Medium</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="large">
                  <label>Large</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="x-large">
                  <label>X-Large</label>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end radio -->
        <div class="four wide column" id="checkbox">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="small">
                  <label>Red</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="medium">
                  <label>Orange</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="large">
                  <label>Green</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="x-large">
                  <label>Blue</label>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end checkbox -->
        <div class="eight wide column" id="input">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui labeled input">
                  <div class="ui label">
                    Name
                  </div>
                  <input type="text" placeholder="your name">
                </div>
              </div>
              <div class="field">
                <div class="ui selection dropdown">
                  <input type="hidden" name="gender">
                  <i class="dropdown icon"></i>
                  <div class="default text">Gender</div>
                  <div class="menu">
                    <div class="item" data-value="1">Male</div>
                    <div class="item" data-value="0">Female</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end input -->
      </div>
      <!-- end grid -->
    </div>
    <!-- end content -->
  </div>
  <!-- end accordion -->

  <table class="ui blue celled striped compact table">
    <thead>
      <tr>
        <th class="collapsing">No</th>
        <th>Food</th>
        <th>Code</th>
        <th>Calories</th>
        <th>Protein</th>
        <th class="center aligned collapsing">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="collapsing">1</td>
        <td>Apples</td>
        <td>Ap</td>
        <td>200</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">2</td>
        <td>Orange</td>
        <td>Or</td>
        <td>310</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">3</td>
        <td>Mango</td>
        <td>Mg</td>
        <td>360</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
    </tbody>
  </table>
  <!-- end table -->
</div>
<!-- end container -->
</div>
<footer class="footer">
  Micro Tech 2015. All Rights Reserved
</footer>

<script type="text/javascript">
  $(document).ready(function() {
    $('.ui.accordion').accordion();
  })
</script>

页脚语义 UI

Footer Semantic UI

html

css

semantic-ui