Html 引导：1列侧边栏记录其他列内容的高度_Html_Css_Twitter Bootstrap_Responsive Design

Html 引导：1列侧边栏记录其他列内容的高度

html css twitter-bootstrap responsive-design

Html 引导：1列侧边栏记录其他列内容的高度,html,css,twitter-bootstrap,responsive-design,Html,Css,Twitter Bootstrap,Responsive Design,我正试图使用Bootstrap使左侧的边栏占据右侧内容的高度。我见过一些人有类似的问题，但不管右边内容的大小，都没有解决方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co

我正试图使用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>


引导边栏
html，正文{
身高：100%；
背景色：#000；
}
.集装箱{
身高：100%；
}
.主排{
左边距：0；
右边距：0；
}
.填充{
宽度：100%；
身高：100%；
最小高度：100%；
填充：0px；
}
.侧边栏
{
背景：#f0；
身高：100%；
最小高度：100%；
}
.主要内容领域
{
背景：#fff；
}
航行
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

理想情况下，我希望使用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>


引导边栏
html，正文{
身高：100%；
背景色：#000；
}
.集装箱{
身高：100%；
}
.主排{
左边距：0；
右边距：0；
}
.填充{
宽度：100%；
身高：100%；
最小高度：100%；
填充：0px；
}
.侧边栏
{
背景：#f0；
身高：100%；
最小高度：100%；
}
.主要内容领域
{
背景：#fff；
}
航行
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

这个问题似乎一直存在……：（

CSS用于样式，对于获取DOM元素顶部等功能，可以使用Jquery的

height（）

方法

使用CSS不可能获得DOM元素的高度，使用CSS可以做的是设置DOM元素的高度

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

div.row
 div.col-sm-2 //sidebar
 div.col-sm-10 //content
   div.row
     div.col-sm-6 //content cell
     div.col-sm-6 //content cell
   div.row
     div.col-sm-6 //content cell
     div.col-sm-6 //content cell
... ...