LIVE DEMO

Question

我正在使用bootstrap来设计网站。该网站左侧有一个菜单栏，右侧有内容。一切都很好，但客户希望菜单面的背景颜色与内容面的高度相同我尝试使用高度：100％，它使高度更大，但不是与内容完全相同的高度。

可在此处找到工作链接Link

我的HTML如下

<html>
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">    
    <link href="css/my-style.css" type="text/css" rel="stylesheet">
</head>
<body> 
    <div class="container-fluid">
    <div class="container row">
    <div  class="col-sm-3">
        <nav id="NavDetails" class="navbar navbar-default" role="navigation">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div  class="collapse navbar-collapse">
                <div id="TitleNav" class="panel-heading">Online Services</div>
                <ul class="nav nav-stacked">
                        <ul class="nav nav-pills nav-stacked">
                            <li> <a href="#">Menu 1</a> </li>
                            <li> <a href="#">Menu 2</a> </li>
                            <li> <a href="#">Menu 3</a> </li>
                            <li> <a href="#">Menu 4</a> </li>
                            <li> <a href="#">Menu 5</a> </li>
                            <li> <a href="#">Menu 6</a> </li>
                            <li> <a href="#">Menu 7</a> </li>
                            <li> <a href="#">Menu 8</a> </li>
                            <li> <a href="#">Menu 9</a> </li>
                            <li> <a href="#">Menu 10</a> </li>
                            <li> <a href="#">Menu 11</a> </li>
                            <li> <a href="#">Menu 12</a> </li>
                        </ul>    
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>

    </div><!--/end left column-->

    <div  class="col-sm-9">

        <div id="ContentDetails" class="container">     
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
    </div>  
    </div>

</div>

 </div>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

CSS样式文件是

@media screen and (max-width: 768px) {  
  .title-label {
    font-size: 12px; 
    color: blue;    
    margin-bottom: 5px;
  } 
  .instruction-label {
    font-size: 8px;         
    margin-bottom: 5px;
  }  
   #COESTitle  {
    font-size: 12px; 
    font-weight: bold;  
    margin-top: 5px;
  }
  .heading-row{
    margin-top: 5px;        
    margin-bottom: 5px;     
  }  
  .heading-label {
    font-size: 12px; 
    font-weight: bolder;        
  }  
  .details-label  { 
    font-size: 12px; 
    font-weight: bolder;                
  }  
  .text-row{    
    padding-left:10px;  
  }  
  .text-label{  
    font-size: 12px;                
  }  
 .text-value{   
    font-size: 12px; 
    font-weight: bolder;        
  } 
  .input-row{
    margin-bottom: 5px;  
  }

  #SocketsDetails  {    
    margin-bottom: 5px;
  }

 .electrical-work-undertaken-spacing{
    margin-top: 5px;
    margin-bottom: 5px; 
  } 

    #Footer
{
    background-color: #d3d3d3;
    height:40px;
    padding-top: 10px;
    padding-left: 40px;
    font-size: 10px;

}

 #NavDetails{

    height: auto;
 }


}


@media screen and (min-width: 768px) { 
 .title-label {
    font-size: 16px; 
    color: blue;    
    margin-bottom: 10px;
  }  
 .instruction-label {
    font-size: 12px;        
    margin-bottom: 10px;
  }  
 #COESTitle  {
    font-size: 16px; 
    font-weight: bold;  
    margin-top: 10px;
  }
 .heading-row{
    margin-top: 10px;
    margin-bottom: 10px;    
  }  
 .heading-label {
    font-size: 16px; 
    font-weight: bold;                  
  }  
 .details-label  {      
    font-size: 16px; 
    font-weight: bolder;        
  }  
 .text-row{ 
    padding-left:20px;  
  }  
 .text-label{   
    font-size: 16px;                
  }  
 .text-value{   
    font-size: 16px; 
    font-weight: bolder;        
  } 
  .input-row{
    margin-bottom: 10px;  
  }

  #SocketsDetails  {    
    margin-bottom: 10px;
  }

   .electrical-work-undertaken-spacing{
    margin-top: 10px;
    margin-bottom: 10px;    
  } 

  #Footer
{
    background-color: #d3d3d3;
    height:40px;
    padding-top: 10px;
    padding-left: 40px;
    font-size: 14px;

}


 #NavDetails{

    height: 100%
 }


}

 #CertDetails{
    border-width: 1px;
    border-style: solid;
}

 #ContentDetails{
    padding-left: 0;
    margin-left: 0;
}

 .mandatory-field{
    color: red;
}

 .type-of-prescribed_checkbox{
    position: relative;
    display: block;
}

 .type-of-prescribed_checkbox  label {
    padding-right: 10px;
}

 .type-of-prescribed_checkbox  label input[type="checkbox"] {
    margin-left: 5px;
}

 #ButtonGroup
{
    text-align: right;
    margin-top: 10px;
    margin-bottom: 10px;
}

 #NavDetails{
    background-color: rgb(0, 102, 203);     
 }

 #TitleNav
 {
    color: #ccff33; 
    text-decoration: underline;
 }

 #NavDetails ul a 
 {
    color: #FFF; 
 }

 .nav>li>a:hover, .nav>li>a:focus
{
    background-color: transparent;

}


#FooterContainer
{   
    padding-left: 30px;
}

 #HeaderContainer{
    margin-top: 10px;
    margin-bottom: 10px;
}



img {
          display: block;
          height: auto;
          max-width: 100%;
   }


   div.image {


   background-image: url("../images/buton-bottom.jpg"); 
   background-repeat: x-repeat; 

 height: 11px;

}

Answer 1

这个SO应该有所帮助：How can I make Bootstrap columns all the same height?

我个人最喜欢的方法是使用负边距技巧的极大填充，因为它太奇怪了。

Answer 2

试试这个技巧：）

LIVE DEMO

HTML：

<div class="container">
            <div class="row">
                <div id="div1" style="background-color: lightgray" class="col-md-6">
                    hi<br />
                    hi<br />
                    hi<br />
                    hi<br />
                    hi<br />
                    hi<br />
                    hi<br />
                </div>
                <div id="div2" style="background-color: lightgreen" class="col-md-6">
                    ff
                </div>
            </div>
        </div>

SCRIPT：

$(document).ready(function () {

            DivHeight();
        });

        function DivHeight() {
            var div1Height = $("#div1")[0].clientHeight;
            var div2Height = $("#div2")[0].clientHeight;
            var commonHeight;
            if (div1Height > div2Height) {
                commonHeight = div1Height + 'px';
            } else {
                commonHeight = div2Height + 'px';
            }
            $("#div1").css('height', commonHeight);
            $("#div2").css('height', commonHeight);
        }

如何使用不同内容的两个相同高度的列？

2 个答案:

LIVE DEMO