Question

我需要一个粘性页脚和一个带侧边栏的内容区域组合的帮助。

以下是代码段：

＆＃13;

mandrill mailer

＆＃13;

html, body {
	height: 100%;
}

/* Force Footer to Stay Down */
#outtermost-wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
}

.container-fluid {
    max-width: 960px;
    padding: 0;
    margin: 0;
    border: 1px dotted pink;
}

#page-header {
    border: 3px dotted blue;
}

.chart-nav {
    border: 2px solid green;
}

#page-content {
    border: 3px dashed green;
}

.chart-sidebar-wrapper {
    width: 145px;
}

.faux-sidebar-wrapper {
    background-color: #E8E8E8;
    min-height: 100px;
    position: absolute;
    top: 55px; /* Top Nav + Chart Nav Heights (ESTIMATED FOR THIS EXAMPLE)*/
    bottom: 50px; /* Footer Height */
    width: 100%;
}

nav.navbar-default {
    margin-bottom: 50px;
    width: 100%;
}

.faux-sidebar {
    margin: 0 0 0 155px;
    padding: 0;
    position: relative;
    height: 100%;
    background-color: #F8F8F8;
    border-left: 1px solid fuschia;
    min-height: 100px;
}

.footer-push {
    clear: both;
    border: 3px solid pink;
    height: 50px;
}

#page-footer {
    width: 100%;
    height: 50px;
    border: 3px solid red;
}

＆＃13;

看起来像这样，

我的问题是我需要侧边栏（请参阅超链接）一直延伸到页脚（它应该在右边有一个薄边框）我还需要页脚不要从底部抬起内容短的窗口。

P.S。如果有帮助，我会使用bootstrap。

请帮助，谢谢。

Answer 1

这是一个我认为代表你想要的布局 - 查看jsFiddle链接并调整页面大小。您可以看到，对于简短内容，页脚位于页面底部。对于较长的内容，内容会将页脚向下推到页面底部并滚动页面。

根据this article中的代码改编的解决方案。唯一需要注意的是，要使这个解决方案正常工作，页脚需要有一个固定的高度（在这种情况下为60px）。

JSFiddle：https://jsfiddle.net/2gcxvjms/

现场演示：

＆＃13;

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#subheader {
    padding: 10px;
    background: lightblue;
}
#body {
    padding-bottom:60px;
    overflow: auto;
    /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    /* Height of the footer */
    background:#6cf;
}
/* other non-essential CSS */
 #header p, #header h1 {
    margin:0;
    padding:10px 0 0 10px;
}
#footer p {
    margin:0;
    padding:10px;
}

#c1 {
    float: left;
    width: 50%;
}

#c2 {
    float: left;
    width: 50%;
    height: 100%;
}

＆＃13;

<div id="container">
    <div id="header">
         <h1>Header 1 Text</h1>
    </div>
    <div id="subheader">
         <h2>Header 2 Text</h2>
    </div>
    <div id="body">
        <div id="c1">
            Column 1 Text<br />
            Column 1 Text<br />
            Column 1 Text<br />
            Column 1 Text<br />
            Column 1 Text<br />
            Column 1 Text<br />
        </div>
        <div id="c2">
            Column 2 Text<br />
            Column 2 Text<br />
            Column 2 Text<br />
            Column 2 Text<br />
            Column 2 Text<br />
            Column 2 Text<br />
        </div>
    </div>
    <div id="footer">
         Footer Text
    </div>
</div>

＆＃13;

Answer 2

以下是使用固定在顶部的navbars和fixed-sidebar的布局版本，以便您的main-content滚动到所有内容。然后，您可以将侧边栏和页脚层叠在另一个上面或下面。现在它看起来很好，但CSS很容易改变，所以可以覆盖另一个。

侧边栏在360px下隐藏在视口上，但可以通过删除媒体查询来恢复。

希望它有所帮助。

body,
html {
  position: relative;
  margin-top: 125px;
  margin-bottom: 50px;
}
.navbar.navbar-custom {
  border-radius: 0px;
  border: none;
  background: #337ab7;
  border-bottom: 1px solid #ff0;
}
.navbar-custom .upper-nav {
  font-size: 20px;
  padding: 9px 20px;
  height: 50px;
  color: #337ab7;
  background-color: #fff;
}
.navbar-custom .upper-nav img {
  margin-top: 0px;
}
.navbar-custom .navbar-nav {
  margin-right: 30px;
}
.navbar-custom .nav-buttons {
  border-radius: 0px;
  background: none;
  border: none;
  color: #337ab7;
}
.navbar.navbar-custom .btn-group .dropdown-menu > li > a {
  color: #fff;
}
.navbar.navbar-custom .btn-group .dropdown-menu > li > a:hover {
  color: #444;
}
.navbar.navbar-custom .navbar-nav > li > a {
  color: #fff;
  border: none;
}
.navbar.navbar-custom .navbar-brand {
  color: #fff;
}
.navbar.navbar-custom .dropdown-menu {
  background: #266080;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a,
.navbar-custom .navbar-nav .open .dropdown-menu {
  color: #fff;
  border: none;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li >a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu:hover {
  color: #fff;
  border: none;
}
.navbar.navbar-custom .navbar-toggle,
.navbar.navbar-custom .navbar-toggle:focus,
.navbar.navbar-custom .navbar-toggle:hover {
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
  color: #fff;
}
.sidebar-fixed {
  margin-top: 100px;
  padding: 5px 18px;
  position: fixed;
  width: 200px;
  height: 100%;
  top: 0;
  left: 0;
  background: #337ab7;
  border-right: 1px solid #ff0;
  z-index: 1500;
}
ul.sidebar-list {
  list-style: none;
  display: inline;
  text-align: left;
}
ul.sidebar-list > li {
  font-size: 18px;
  padding-bottom: 25px;
}
ul.sidebar-list > li > a {
  color: #fff;
  text-decoration: none;
}
.main-content .well {
  background-color: transparent;
  border: 3px solid #428bca;
  border-radius: 0px;
  text-align: center;
  font-size: 25px;
}
.main-content {
  margin-left: 200px;
}
.footer {
  vertical-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #337ab7;
  padding: 12px 0;
  z-index: 3100;
}
ul.footer-nav > li {
  margin-top: 5px;
  list-style: none;
  vertical-align: center;
  text-align: right;
}
ul.footer-nav > li > a {
  text-decoration: none;
  color: #fff;
}
@media (max-width: 768px) {
  .navbar-custom .navbar-nav {
    margin-right: 0;
  }
  .navbar-custom .navbar-nav > li > a {
    color: #fff;
  }
  .sidebar-fixed {
    margin-top: 104px;
    width: 100px;
  }
  .main-content {
    margin-left: 100px;
    padding: 0;
  }
  ul.sidebar-list > li {
    font-size: 14px;
    padding-bottom: 25px;
  }
  .navbar-custom .navbar-collapse {
    margin-left: 100px;
    border: none;
  }
}
@media (max-width: 360px) {
  .sidebar-fixed {
    display: none;
  }
  .main-content {
    margin-left: 0;
    padding: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
    <div class="upper-nav">
      <img src="http://placehold.it/150x30/337ab7/fff?text=Logo" alt="" />
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-user" </span> 
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a> 
          </li>
        </ul>
      </div>
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-inbox" </span> 
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a> 
          </li>
        </ul>
      </div>
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-off" </span> 
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a> 
          </li>
        </ul>
      </div>
    </div>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span>  <span class="glyphicon glyphicon-plus"></span> 
      </button> <a class="navbar-brand" href="#">Home</a> 
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a> 
            </li>
            <li><a href="#">Menun Item 2</a> 
            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a> 
            </li>
            <li><a href="#">Menun Item 2</a> 
            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a> 
            </li>
            <li><a href="#">Menun Item 2</a> 
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div class="container-fluid">
  <div class="sidebar-fixed">
    <ul class="sidebar-list">
      <li> <a href="#"> About</a> 
      </li>
      <li> <a href="#"> Contact</a> 
      </li>
      <li> <a href="#"> Products</a> 
      </li>
      <li> <a href="#"> Blog</a> 
      </li>
    </ul>
  </div>
  <div class="main-content">
    <div class="container-fluid">
      <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
      </div>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux
        de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce
        à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition
        et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a
        pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum,
        et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux
        de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce
        à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition
        et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a
        pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum,
        et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux
        de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce
        à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition
        et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a
        pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum,
        et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p>
    </div>
  </div>
</div>
<footer class="footer">
  <div class="container">
    <ul class="footer-nav">
      <li><a href="#">Copyright &#169; 2015</a> 
      </li>
    </ul>
  </div>
</footer>

Answer 3

因此，根据我的评论，我制作了一个非常简单的版本，以显示实现您想要的代码所需的代码很少

修改将我的代码示例更新为代码段而不是小提琴。

此示例可以升级为使用flex，并对html / css进行一些更改。

＆＃13;
＆＃13;
html, body { height: 100%; margin: 0 } body, .main-inner { display: table; width: 100%; height: 100% } .page-row { display: table-row; height: 1px; } .page-row-expanded { height: 100%; } .item1, .item2 { width: 29%; box-sizing: border-box; display: table-cell; height: 100% } .item2 { width: 70%; } .header-inner, .footer-inner, .item1, .item2 { border: 1px solid black }
＆＃13;
<header class="page-row"> <div class="header-inner"> <h1>Site Title</h1> </div> </header> <header class="page-row"> <div class="header-inner"> <h1>Sub Site Title</h1> </div> </header> <main class="page-row page-row-expanded"> <div class="main-inner"> <div class="item1"> Menu </div> <div class="item2"> Sample <br> Content <br> </div> </div> </main> <footer class="page-row"> <div class="footer-inner"> <p>Copyright, blah blah blah.</p> </div> </footer>
＆＃13;
＆＃13;
＆＃13;

100％高度边栏和页脚不会留在它下面

3 个答案: