当我尝试对具有多个内部 div 的容器进行适当的解决方案时，就会出现这个问题。这适用于正文中的简单 div
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color:#990000;
}
——这不是本周的典型情况：由 html 书和 1/10 创建的 60 小时工作是可计费的，因为它不起作用：尽管遵循了这封信，但说明不起作用；他们什么也没说必须突出显示条目然后点击选项卡以使 id 出现在草稿窗口中！--
为什么这在更复杂的页面中不起作用，其中#wrapper 变为#container_toolbox，其中包含更多的 div。在 IE 和 Mozilla 中，右边总是有一个间隙。为什么？
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color:#99000;
}
现在，如果我在测试页面中用第二个代码替换第一个代码，它可以完美运行。为什么，当这个#container_toolbox 中有嵌套的 div 时，它不起作用。我正在使用 Dreamweaver 和 Aptana'a 下载来创建页面。
这是两个示例：第一个是有效的示例：
<head>
<title>ggggg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color: #990000;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container_toolbox">
<p> in mature regions, and changes of focus among a large
pack of shops as various markets undergo change. How do you pick the right one to
work with you at any point in time? -- Well, maybe you shouldn't pick one.</p>
</div>
</body>
Here is the one that doesn't work I've had to eliminate html5 tags frequently:
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Toolbox</title>
<link href="../styles/toolbox_stylesheet.css" rel="stylesheet" type="text/css">
<link href="../styles/basic_style_2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" >
document.createElement("header");
document.createElement("hgroup");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("nav");
</script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
}
</style>
</head>
<body>
<div id="container_toolbox">
<!--start container for page-->
<!--top section includes: header with logo; aside with contact info...
site navigation-->
<div id="head">
<div id="logoDiv"><img src="../images/headerLogo.jpg" alt="Fabshops.com"></div>
<div class="aside" id="contactAside">
<p>Phone: (973) 738 2599</p>
<p>Email: <a href="mailto:info@fabshops.com">info@fabshops.com</a> </p>
</div>
<div class="nav f" id="mainNav">
<ul class="navul" id="ulMainNav">
<li><a href="../welcome.html">Home</a></li>
<li><a href="../ProductTypes/ProductTypes.html">Equipment Types</a></li>
<!--<li><a href="../About/about.html">About</a></li>-->
<li><a href="../contact/contact.html">Contact</a></li>
<li><a href="../newsletter/newsletter.html">Newsletter</a></li>
<li><a href="toolbox.html">Toolbox</a></li>
</ul>
</div>
</div>
<div id="accentLine"> </div>
<!--body section includes: inner navigation; articles; aside-->
<!--*********************************************************************-->
<!--*********************************************************************-->
<article id="content_toolbox">
<!--begin content section-->
<!--*********************************************************************-->
<!--begin sideNav-->
<nav class="nav" id="sideNav">
<div class="nav" id="sideHeader">
<h2>Tool Box</h2>
</div>
<div id="lowerNav">
<ul class="sidenavul" id="sideNavList">
<li><a href="../welcome.html">Home</a></li>
</ul>
</div>
</nav>
<!--End sideNav-->
<!--*********************************************************************-->
<section class="sectionhd_toolbx" id="sectionhd_toolbx">
<!--begin contents of section head-->
<h1>Select the converter appropriate for your purposes.</h1>
<h2>Make sure your browser permits Javascript</h2>
<!--end contents of lead article-->
</section>
<!-- ******************************************************************** -->
<!--<section id="section_toolbx">--><!--begin contents of second article--><!--end contents of second article-->
<!--</section>-->
<!--end content section-->
<section id="toolbox">
<!-- Put the toolbox into a table as margin-left/rignt:auto is not working here -->
<!-- Begin toolbox table -->
<table class="tbtoolbx" id="tbtoolbox">
<tr>
<td id="tdleft"> </td>
<td id="tdmiddle">
<!--begin iframe section-->
<p><a href="../toolbox/Capacity_Volume.html" target="calcIframe">Volume & Capacity</a> |
<a href="PressureConverter.html" target="calcIframe">Pressure
Converter</a> | <a href="LengthConverter.html" target="calcIframe">Length
Converter</a> | <a href="WeightConverter.html" target="calcIframe">Weight
Converter</a> | <a href="CurrencyConverter.html" target="calcIframe">Currency
Converter</a><br>
<a href="TemperatureConverter.html" target="calcIframe">Temperature Converter</a></p>
<iframe name="calcIframe" src="../toolbox/Capacity_Volume.html" scrolling="no">You
need a Frames Capable browser to view this content. </iframe>
<!--end iframe section--> </td>
<td id="tdright"></td>
</tr>
</table> <!-- EndBegin toolbox table -->
</section>
</article>
<!-- ************************************************************************* -->
<!--***************************************************************************-->
<!--footer-->
<div class="footer" id="foot">
<p><<a href="../welcome.html">Home</a> | <a href="../ProductTypes/ProductTypes.html">Equipment Types | <a href="../About/OurShops.html">Our Shops</a> | <a href="../contact/contact.html">Contact</a> | <a href="../newsletter/newsletter.html">Newsletter</a> | <a href="../toolbox/toolbox.html">Toolbox</a></p>
<p>Fabshops.com is a subdivision of Ridgeback Company, Inc</p>
<p>Headquarters: 61 Ormont Road, Chatham, NJ 07928</p>
<p>Web site designed by <a>TutorWright</a></p>
</div>
<!--end container for page-->
</div>
</body>
</html>