Question

我已经将我需要的所有内容设置为100％到100％的高度，但是当使用Bootstrap 3.0时，侧边栏仍然拒绝到达页面底部。我已经使用了-9999px技巧，但是我在其上方的导航中删除了下拉列表，因此我无法使用该修复程序。

我试过的是：

<div class="row-fluid fill">
    <nav class="col-lg-2 fill">
       <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-piggy-bank navicon" aria-hidden="true"></span> Animal Care</a><br />
       <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-user navicon" aria-hidden="true"></span> Customers</a><br />
       <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-gift navicon" aria-hidden="true"></span> Donations</a><br />
       <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-calendar navicon" aria-hidden="true"></span> Events</a><br />
       <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-screenshot navicon" aria-hidden="true"></span> Marketing</a><br />
       <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-briefcase navicon" aria-hidden="true"></span> Staff Mangement</a><br />
       <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-globe navicon" aria-hidden="true"></span> Web Maintenance</a><br />
       <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-shopping-cart navicon" aria-hidden="true"></span> Products & Stock</a><br />
    </nav>
    <div class="col-lg-10 content fill">
       <h1>Dashboard</h1>
       <ul class="breadcrumb">
          <li class="active">Home</li>
       </ul>
       <div class="row-fluid">
          <div class="col-lg-4 zookeeper excount">
             10
          </div>
          <div class="col-lg-4 birdofprey excount">
             10
          </div>
          <div class="col-lg-4 otherex excount">
             1
          </div>
       </div>
       <div class="row-fluid">
          <div class="col-lg-4 exlabel">
             Zoo Keeper Experiences
          </div>
          <div class="col-lg-4 exlabel">
             Bird of Prey Experiences
          </div>
          <div class="col-lg-4 exlabel">
             Other Events
          </div>
       </div>
       <div class="row-fluid">
          <div class="col-lg-12 dashtoday">
             <h2>Today - 17th March 2015</h2>
                <div role="tabpanel">
                   <ul class="nav nav-tabs" role="tablist" id="dashTabs">
                      <li role="presentation" class="active"><a href="#todo" aria-controls="todo" role="tab" data-toggle="tab">To-Do</a></li>
                      <li role="presentation"><a href="#keeperlog" aria-controls="keeperlog" role="tab" data-toggle="tab">Keeper Log</a></li>
                   </ul>
                   <div class="tab-content">
                      <div role="tabpanel" class="tab-pane fade in active" id="todo">
                         <ul class="nav nav-pills nav-stacked dashtodo">
                            <li class="active todoitem">
                               <a href="#">To-Do Item Outstanding</a>
                            </li>
                            <li class="active todoitem">
                               <a href="#">To-Do Item Outstanding</a>
                            </li>
                            <li class="disabled">
                               <a href="#">To-Do Item Complete</a>
                            </li>
                            <li class="active todoitem">
                               <a href="#">To-Do Item Outstanding</a>
                            </li>
                            <li class="active todoitem">
                               <a href="#">To-Do Item Outstanding</a>
                            </li>
                            <li class="active todoitem">
                               <a href="#">To-Do Item Outstanding</a>
                            </li>
                         </ul>
                      </div>
                      <div role="tabpanel" class="tab-pane fade" id="keeperlog">
                         <ul class="nav nav-pills nav-stacked dashtodo">
                            <li class="active todoitem">
                               <a href="#">To-Do Item Outstanding</a>
                            </li>
                            <li class="disabled">
                               <a href="#">To-Do Item Complete</a>
                            </li>
                            <li class="disabled">
                               <a href="#">To-Do Item Complete</a>
                            </li>
                         </ul>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>

我为Boostrap添加的CSS的高度是：

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    height: 100%;
}

Answer 1

罪魁祸首是ASP.Net自动插入表格标签以呈现控件。简单的解决方法是将CSS更改为：

html, body, form {
    height: 100%;
}

.fill { 
    min-height: 100%;
    height: 100%;
}

现在高度按预期工作

Bootstrap 3.0高度100％不起作用

1 个答案: