Html 如何使两列具有相同高度和不同内容?
我正在使用引导设计一个网站。网站左侧有一个菜单栏,右侧有内容。一切都很好,但客户希望菜单侧的背景颜色与内容侧的高度相同。 我尝试过使用高度:100%,它使高度更大,但与内容的高度不完全相同 可以在这里找到一个工作链接 我的html如下Html 如何使两列具有相同高度和不同内容?,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在使用引导设计一个网站。网站左侧有一个菜单栏,右侧有内容。一切都很好,但客户希望菜单侧的背景颜色与内容侧的高度相同。 我尝试过使用高度:100%,它使高度更大,但与内容的高度不完全相同 可以在这里找到一个工作链接 我的html如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
这将有助于:
我个人最喜欢的方法是带负边距的超大填充技巧,因为它太奇怪了。试试这个技巧:
HTML:
@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;
}
<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>
$(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);
}