我正在开发一个也使用 jQuery 的开源流体 html 布局。有一个问题一直让我发疯，因为在过去的几个小时里我无法解决这个问题。我确定我错过了一些相当简单的东西，如果你能帮我找到它，我将不胜感激。
问题是当我尝试让 div#content-wrapper 有一个min-height和margin-left/时margin-right。基本上它应该填满页面并在左右两侧留出一些空间。
在 cssdeck http://cssdeck.com/labs/fluid-html-template的工作空间中查看时看起来不错，但是当您在http://cssdeck.com/labs/full/全屏查看时在 Chromium 开发人员工具 (F12) 上， fluid -html-template/0我看到#content-wrapper该类与. 这可能是什么原因造成的？我发现覆盖它的唯一方法是将样式直接应用于具有属性的标签。div#content-wrapperMatched CSS Rulesdivstyle
由于模板是用jade-lang 编写的，因此这里是计算的html、JavaScript 和CSS 代码，以使事情变得更容易。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://github.com/WeaponXI/cplog/raw/master/public/javascripts/jquery.js"></script>
<script type="text/javascript" src="https://raw.github.com/WeaponXI/cplog/master/public/javascripts/jquery-ui-1.9.1.custom.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WeaponXI</title>
</head>
<body>
<div class="wrapper">
<div class="top-nav ui-widget-header">Home | Login | Etc</div>
<div class="header">
<div class="logo"></div>
<div class="menu ui-widget-header">
<div id="menu">
<ul>
<li> <a href="/" title="Home"> Home</a>
<ul>
<li> <a href="/users" title="Users"> Users</a>
</li>
<li> <a href="/users2" title="Users"> Users</a>
</li>
</ul>
</li>
<li> <a href="/cplog" title="Captains Logs"> Captains Logs</a>
</li>
<li> <a href="/contact" title="Contact"> Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="left-panel"></div>
<div id="content-wrapper" class="ui-widget-content ui-corner-all">
<div id="content">Content</div>
</div>
<div class="right-panel"></div>
<div class="bottom-panel"></div>
</div><!--
<end>wrapper</end>-->
<footer>
<div id="footer"><em>Copyright © 2013 WeaponXI.com</em></div>
</footer>
</body>
</html>
CSS：
body, html {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
}
.top-nav {
z-index:0 !important;
padding:4px;
background-color:#333;
color:white;
font-size:0.8em;
opacity:0.6;
}
.top-nav:hover {
opacity:0.9;
}
.header {
height: 200px;
background: #fff;
overflow: hidden;
display: block;
}
.logo {
/*width: 451px;*/
height:130px;
background-image:url(https://github.com/WeaponXI/cplog/raw/master/public/images/logo.png);
background-position:center center;
background-repeat:no-repeat;
}
.menu {
z-index:0 !important;
position:relative;
text-align: left;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
margin-top:5px;
margin-bottom:5px;
width:100%;
height:30px;
font-size : 0.7em;
}
.ui-menu { position: absolute; width: 100px;}
#content-wrapper {
width:auto;
margin-left:20px;
margin-right:20px;
min-height:600px;
margin-bottom:20px;
}
#content {
padding: 20px;
font:1em;
}
footer {
width: auto;
margin-left:20px;
margin-right:20px;
border-top: thin solid #999;
display: block;
}
#footer {
padding:10px;
font-size:0.8em;
}
JavaScript：（这只处理菜单）
$(function() {
$(document.createElement('div')).attr('id', 'menu-p').appendTo('#menu');
$(document.createElement('div')).attr('id', 'menu-c').appendTo('#menu');
$('#menu > ul').children('li').children('a').each(function(i) {
$(this).attr('id', 'menu-p-' + i).parent().children('ul').attr('id', 'menu-c-' + i).appendTo('#menu-c');
$(this).appendTo('#menu-p').parent().parent().children('ul').remove();
});
var shownmenu;
$('#menu-p').children('a').each(function() {
var n = $(this).attr('id').split('-')[2];
var button = $(this);
if ($('#menu-c-' + n).length) {
button.button({
text: true,
icons: {
secondary: "ui-icon-triangle-1-s"
}
}).hover(function() {
$('#menu-c-' + n).show().position({
my: "left top",
at: "left bottom",
of: this
});
}, function() {
$('#menu-c-' + n).hover(function() {
$('#menu-c-' + n).show();
}, function() {
$('#menu-c-' + n).hide();
});
$('#menu-c-' + n).hide();
});
$('#menu-c-' + n).hide().menu();
}
else {
button.button();
}
});
$('#menu-p').buttonset();
});