最简单，最干净的引导程序布局

时间：2016-06-03 19:02:39

标签： html css twitter-bootstrap

我为我的项目创建了一个布局，但我似乎无法做到正确。

在此图片中，您会看到我的页面包装器不会拉伸100％的窗口高度。它只是包裹在里面。

Image sample

我还创建了一个JSFiddle，您可以查看。我可以轻松地将min-height添加到我的#page-wrapper，但是在某些屏幕上会出现滚动，而在其他屏幕上会出现同样的问题。设置为min-hieght的{​​{1}}或height不起作用。

然后我还希望100%和top-nav保持固定在屏幕上，这样只有白色区域才能滚动。下图显示了我最终想要实现的目标。

enter image description here

如何解决此问题或获得此布局的最有效方法是什么？

HTML：

side-bar

CSS：

<div id="wrapper">
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <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="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Purchase Module</a>
    </div>
    <ul class="nav navbar-top-links navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-user">
          <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
          </li>
          <li class="divider"></li>
          <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
          <li class="sidebar-search">
            <div class="input-group custom-search-form">
              <input type="text" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
            </div>
          </li>
          <li>
            <a href="#"><i class="fa fa-angle-double-right"></i> Dashboard</a>
          </li>
          <li>
            <a href="#"><i class="fa fa-angle-double-right"></i> Orders</a>
          </li>
          <li>
            <a href="#"><i class="fa fa-angle-double-right"></i> Vendors</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="page-wrapper">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <span class="navbar-brand" href="#">Vendors</span>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="{{ path('vendor_new') }}"><i class="fa fa-plus-circle"></i> Add new</a></li>
        </ul>
      </div>
    </nav>
    <table id="index-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Contact Person</th>
          <th>Phone Number</th>
          <th>Email Address</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="#">1</a></td>
          <td>Tellus LLC</td>
          <td>Nigel Chaney</td>
          <td>070 8741 7876</td>
          <td>nec.diam.Duis@felisNulla.com</td>
          <td>
            <div class="btn-group btn-group-xs" role="group">
              <a class="btn btn-default" href="#" role="button">
                <i class="fa fa-search-plus"></i> Show
              </a>
              <a class="btn btn-default" href="#" role="button">
                <i class="fa fa-pencil-square-o"></i> Edit
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

数据表：

body {
  background-color: #f8f8f8;
}

#wrapper {
  width: 100%;
}

#page-wrapper {
  padding: 15px;
  background-color: #fff;
}

@media(min-width:768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 250px;
    padding: 15px;
    border-left: 1px solid #e7e7e7;
  }
}

.navbar-top-links {
  margin-right: 0;
}

.navbar-top-links li {
  display: inline-block;
}

.navbar-top-links li:last-child {
  margin-right: 15px;
}

.navbar-top-links li a {
  padding: 15px;
  min-height: 50px;
}

.navbar-top-links .dropdown-menu li {
  display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
  margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
  padding: 3px 20px;
  min-height: 0;
}

.navbar-top-links .dropdown-menu li a div {
  white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
  width: 310px;
  min-width: 0;
}

.navbar-top-links .dropdown-messages {
  margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
  margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
  margin-left: -123px;
}

.navbar-top-links .dropdown-user {
  right: 0;
  left: auto;
}

.sidebar .sidebar-nav.navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}

.sidebar .sidebar-search {
  padding: 15px;
}

.sidebar ul li {
  border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
  background-color: #eee;
}

.sidebar .arrow {
  float: right;
}

.sidebar .fa.arrow:before {
  content: "\f104";
}

.sidebar .active>a>.fa.arrow:before {
  content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: 0!important;
}

.sidebar .nav-second-level li a {
  padding-left: 37px;
}

.sidebar .nav-third-level li a {
  padding-left: 52px;
}

@media(min-width:768px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 250px;
    margin-top: 51px;
  }
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}

2 个答案:

答案 0 :(得分：1)

要实现第二张图片中的布局，您可以执行以下操作：

<强> HTML 

<html>
    <body>
        <div class="page-content">Content</div>
        <div class="side-bar">Sidebar</div>
        <div class="site-header">Header</div>
    </body>
</html>

<强> CSS 

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.page-content {
  height: 100%;
  background: white;
  padding: 80px 0 0 200px;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background: yellow;
}
.side-bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 200px;
  background: green;
  padding: 80px 0 0 0;
}

小提琴：https://jsfiddle.net/0s3k9kho/

答案 1 :(得分：0)

html, body, #wrapper {
    height: 100%;
}
#page-wrapper {
    min-height: calc(100% - 51px)
}

这适合我。

相关问题
最新问题