この質問は、複数の内部 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 で作成する 60 時間の作業と、1/10 は機能しないため請求可能です: 指示は手紙に従っても機能しません。そして、エントリを強調表示してからタブを押して 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;
}
ここで、テスト ページの最初のコードを 2 番目のコードに置き換えると、完全に機能します。この #container_toolbox 内にネストされた div がある場合、なぜ機能しないのでしょうか。Dreamweaver と Aptana'a ダウンロードの両方を使用してページを作成しています。
ここに 2 つのサンプルがあります。最初のサンプルは機能します。
<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>