我试图让两列具有相同的高度，但事实并非如此。
我的 html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
jQuery(document).ready(function () {
var divone = jQuery(".main-content").height();
var divtwo = jQuery(".sidebar").height();
var maxdiv = Math.max(divone, divtwo);
jQuery(".main-content").height(maxdiv);
jQuery(".sidebar").height(maxdiv);
});
</script>
</head>
<body>
@RenderBody()
<header>
<h1>Document Heading</h1>
<div class="nav">
<ul class="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Sermon", "Sermon", "Home")</li>
</ul>
</div>
</header>
<div class="main-content">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div class="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<footer>FOOTER</footer>
</body>
</html>
就是asp.net mvc 4 _Layout.cshtml。部分 CSS 是:
body {
font-size: .85em;
font-family: "Segoe UI" , Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
background-color: #CCCCFF;
}
.main-content
{
float: left;
width: 60%;
margin-left: 5%;
}
.sidebar
{
float: right;
width: 35%;
background-color: #00FFFF;
}
footer
{
margin: 0px;
clear: both;
background-color: #FF6600;
font-size: .8em;
text-align: center;
height: 50px;
position: absolute;
bottom: 0;
width: 100%;
padding-top: 20px;
}
为什么两个列的高度不同，即使它们被 jquery 强制为相等？
更新: fiddle
最佳答案
看起来你的 div 高度是一样的。请为 .man-content 类添加背景色以供测试。
.main-content{
float: left;
width: 60%;
margin-left: 5%;
background-color: #006400; /*new*/
}
关于jquery - 使两列高度相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17077123/