Question

我正在尝试使用Bootstrap在左侧创建一个侧边栏，取右侧内容的高度。我见过一些人的问题模糊不清，但无论右边内容的大小如何，都无法解决问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sidebar</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<style>  
    html,body {
      height:100%;
      background-color:#000;
    }
    .container {
      height:100%;
    }
    .main-row {
      margin-left:0;
      margin-right:0;
    }
    .fill {
      width:100%;
      height:100%;
      min-height:100%;
      padding:0px;
    }
    .sidebar
    {
      background: #F0F0F0;
      height:100%;
      min-height:100%;
    }
    .main-content-area
    {
      background: #fff;
    }
</style>


</head>
<body>

   <div class="row main-row fill">
    <div class="col-sm-2 sidebar hidden-xs">
        <h3>Navigation</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

我希望理想情况下使用CSS解决这个问题，而不是像某些解决方案所暗示的那样使用JQuery。我确信这是可能的，只是不确定如何。

感谢任何帮助，谢谢！

编辑：我按照建议审查了我的结构：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sidebar</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <style>  
        html,body {
          height:100%;
          background-color:#000;
        }
        .container {
          height:100%;
        }
        .main-row {
          margin-left:0;
          margin-right:0;
        }
        .fill {
          width:100%;
          height:100%;
          min-height:100%;
          padding:0px;
        }
        .sidebar
        {
          background: #F0F0F0;
          height:100%;
          min-height:100%;
        }
        .main-content-area
        {
          background: #fff;
        }
    </style>


</head>
<body>

   <div class="row main-row fill">
    <div class="col-sm-2 sidebar hidden-xs">
        <h3>Navigation</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>


        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

问题似乎仍然存在...... :(

Answer 1

@jcbmb你设计网格的方式似乎是造成这个问题的原因。

首先将页面分为2列（侧栏，内容）
然后将第二列分成多行并分隔内容div

下面的一些结构：

type
  TChListBox = class(TListBox)
  private
    FOnItemCountChange: TNotifyEvent;
  protected
    procedure WndProc(var Message: TMessage); override;
  published
    property OnItemCountChange: TNotifyEvent read FOnItemCountChange write FOnItemCountChange;
  end;

procedure TChListBox.WndProc(var Message: TMessage);
var
  OldCount: Integer;
begin
  case Message.Msg of
    LB_ADDSTRING, LB_INSERTSTRING, LB_DELETESTRING:
    begin
      // for LB_(ADD|INSERT)STRING, Message.Result is the 0-based
      // index of the added string, or a LB_ERR... error code.
      //
      // for LB_DELETESTRING, Message.Result is the number of items
      // remaining in the list, or a LB_ERR... error code.
      //
      inherited;
      if (Message.Result >= 0) and Assigned(FOnItemCountChange) then
        FOnItemCountChange(Self);
    end;
    LB_RESETCONTENT:
    begin
      // the Message.Result is not used in this message.
      //
      OldCount := Items.Count;
      inherited;
      if (OldCount <> Items.Count) and Assigned(FOnItemCountChange) then
        FOnItemCountChange(Self);
    end;
  else
    inherited;
  end;
end;

注意：你必须使用col-sm-6而不是col-sm-5来平均分配

Answer 2

CSS用于样式，对于获取DOM元素顶部等功能，可以使用Jquery height()方法。

使用CSS无法获得DOM元素的高度，使用CSS可以设置DOM元素的高度。

我的建议：使用Jquery只需要height（）方法

Bootstrap：1个col侧边栏，取其他cols内容的高度

2 个答案: