代码之家  ›  专栏  ›  技术社区  ›  op1001

容器高度颜色不填充-底部的页脚向上移动

  •  1
  • op1001  · 技术社区  · 7 年前

    我一直在使用startbootstrap的模板来完成一些事情。。 我希望页面内容包装是纯色的,但我不能让它保持窗口的100%高度,即使在div中添加更多文本,它也只能保持一定高度的粉红色,不能继续。

    我尝试了一些修复等,但当我做某些事情时,页脚并不会停留在底部(未修复)绝对。。它向上移动。

    white space doesn't fill footer moves up

    我已经包含了一个jsdiffle链接。。拉伸预览窗口,使其看起来更像桌面大小,而不是手机大小。

    html {
    position: relative;
    height: 100%;
    min-height: 100%;
    }
    

    JSFIDDLE Example

    3 回复  |  直到 7 年前
        1
  •  1
  •   Lakindu Gunasekara vinod    7 年前

    将每个位置的位置更改为“相对”,除了。侧边菜单,以便将页脚置于底部。检查我的代码片段中的css文件。

    /*!
     * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
     * Copyright 2013-2017 Start Bootstrap
     * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
     */
    
    @import url('//netdna.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
    html {
      position: relative;
      height: 100%;
      min-height: 100%;
    }
    
    body {
      position: relative;
      margin: 0;
      padding-bottom: 4rem;
      min-height: 100%;
    }
    
    #wrapper {
      padding-left: 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    
    #wrapper.toggled {
      padding-left: 250px;
    }
    
    #sidebar-wrapper {
      z-index: 1000;
      position: fixed;
      left: 250px;
      width: 0;
      height: 100%;
      margin-left: -250px;
      overflow-y: auto;
      background: #000;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    
    #wrapper.toggled #sidebar-wrapper {
      width: 250px;
    }
    
    #page-content-wrapper {
      width: 100%;
      position: relative;
      padding: 15px;
    }
    
    #wrapper.toggled #page-content-wrapper {
      position: relative;
      margin-right: -250px;
    }
    
    
    /* Sidebar Styles */
    
    .sidebar-nav {
      position: absolute;
      top: 0;
      width: 250px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .sidebar-nav li {
      text-indent: 20px;
      line-height: 40px;
    }
    
    .sidebar-nav li a {
      display: block;
      text-decoration: none;
      color: #999999;
    }
    
    .sidebar-nav li a:hover {
      text-decoration: none;
      color: #fff;
      background: rgba(255, 255, 255, 0.2);
    }
    
    .sidebar-nav li a:active,
    .sidebar-nav li a:focus {
      text-decoration: none;
    }
    
    .sidebar-nav>.sidebar-brand {
      height: 65px;
      font-size: 18px;
      line-height: 60px;
    }
    
    .sidebar-nav>.sidebar-brand a {
      color: #999999;
    }
    
    .sidebar-nav>.sidebar-brand a:hover {
      color: #fff;
      background: none;
    }
    
    @media(min-width:768px) {
      #wrapper {
        padding-left: 250px;
      }
      #wrapper.toggled {
        padding-left: 250px;
      }
      #sidebar-wrapper {
        width: 250px;
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
      }
      #wrapper.toggled #sidebar-wrapper {
        width: 250px;
      }
      #page-content-wrapper {
        padding: 20px;
        background-color: pink;
      }
      #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
      }
      .footer {
       position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
    height: 60px;
    line-height: 60px;
    /* Vertically center the text there */
    background-color: #f5f5f5;
      text-align: center;
      }
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
    
      <title>Simple Sidebar - Start Bootstrap Template</title>
    
      <!-- Bootstrap core CSS -->
      <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
      <!-- Custom styles for this template -->
      <link href="css/simple-sidebar.css" rel="stylesheet">
    
    </head>
    
    <body>
    
      <div id="wrapper">
    
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
          <ul class="sidebar-nav">
            <li class="sidebar-brand">
              <a href="#">
                            Start Bootstrap
                        </a>
            </li>
            <li>
              <a href="#">Dashboard</a>
            </li>
            <li>
              <a href="#">Shortcuts</a>
            </li>
            <li>
              <a href="#">Overview</a>
            </li>
            <li>
              <a href="#">Events</a>
            </li>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Services</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
          </ul>
        </div>
        <!-- /#sidebar-wrapper -->
    
        <!-- Page Content -->
        <div id="page-content-wrapper">
          <div class="container-fluid">
            <h1>Simple Sidebar</h1>
            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
              page content will be pushed off canvas.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <h1>Simple Sidebar</h1>
            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
              page content will be pushed off canvas.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <h1>Simple Sidebar</h1>
            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
              page content will be pushed off canvas.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <h1>Simple Sidebar</h1>
            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
              page content will be pushed off canvas.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <h1>Simple Sidebar</h1>
            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
              page content will be pushed off canvas.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <h1>Simple Sidebar</h1>
            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
              page content will be pushed off canvas.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <h1>Simple Sidebar</h1>
            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
              page content will be pushed off canvas.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
            <h1>Simple Sidebar</h1>
            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
              page content will be pushed off canvas.</p>
            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
    
            <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
          </div>
        </div>
        <!-- /#page-content-wrapper -->
        <footer class="footer">
          <div class="container">
            <span class="text-muted">Place sticky footer content here.</span>
          </div>
        </footer>
      </div>
      <!-- /#wrapper -->
    
    
    
    </body>
    
    </html>
        2
  •  0
  •   Saranya Rajendran    7 年前

    在样式表中将页脚位置从绝对更改为相对

     .footer {
    
     position: relative;
      }
    
        3
  •  0
  •   Nivethi Mathan    7 年前

    将页脚类位置更改为“固定”,并将页脚类高度作为填充添加到容器类(容器流体)中

    .footer {
          position: fixed;
          bottom: 0;
          width: 100%;
          /* Set the fixed height of the footer here */
          height: 60px;
          line-height: 60px; /* Vertically center the text there */
          background-color: #f5f5f5;
        }
        .container-fluid
        {
          padding-bottom:60px;
        }
    

    https://jsfiddle.net/pcawynk0/1/