Question

我在测试网站的设计上遇到了麻烦。当我用IE打开我的html页面时，没有我的doctype行，它只是按照我喜欢的方式呈现，但不是在FF中（因为它解释填充的方式，除其他外）。当我添加doctype行时，页面被挤压到大约230px的高度。我的目的是将高度设置为最大页面高度。这是我的文件：

* index.html *

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> 
   <!--[if IE]>
  <style type="text/css">
   body {
    text-align: center;
    /* Remove padding: */
    padding: 0;
   }
   #container {
    /* Mind the box model in IE.. */
    height: 100%;
   }
  </style>
  <![endif]-->
</head>  
<body>
<!--[if IE]><div id="container"><![endif]-->
<div class="container">
     <div class="header">  
         <h1>Logo</h1>  
     </div>
     <div class="nav widget-header ">
            <!-- main nav -->
            <a href=""><div class="nav-button state-default " ><img src="a.jpg" alt="a" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="b.jpg" alt="b" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="c.jpg" alt="c" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="d.jpg" alt="d" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="e.jpg" alt="e" /></div></a>
    </div >
    <div class="content">
        <!--content area-->
        <p>content</p>
    </div>
    <div class="footer">
        <!-- footer -->
        <p>&copy; Copyright</p>
     </div>
</div>
<!--[if IE]></div><![endif]-->
</body>
</html>

* stylesheet.css *

/* reset */
html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
sbutton_cl, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
   padding: 0;  
   border: 0;  
   outline: 0;  
   font-size: 100%;
}  
.body{
    line-height: 1;  
    text-align: center;
}

.widget-header {
background:#333333 url(images/bg-state-default.png) repeat-x scroll 50% 50%;;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
}

.state-default {
    background: #CC0000 url(images/button-state-default.png) repeat-x scroll 50% 50%;
    border:1px solid #333333;
    color:#FFFFFF;
    font-weight:bold;
    font-size: 1em;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

.container  {

    border: 1px solid #999999;
    margin: 0 auto;
    width: 800px;
    height: 100%;
    background-color:#999999;
}

.header  {
    border: 1px solid #999999;
    height:10%;
    margin-top: 0;
    padding: 10px;
}

.nav{
    border: 1px solid #999999;
    height:10%;
    margin-top: 2%;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.nav-button {

    float: left;
    height: 100%;
    margin-left: 3px;
    overflow: hidden;
    width: 150px;
}

.content{
    border: 1px solid #999999;
    height:60%;
    margin-top: 4%;
    padding: 10px;
    background-color:#FFFFFF;
}

.footer{
    border: 1px solid #999999;
    height:10%;
    margin-top: 4%;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    background-color: #FFFFFF;
}

我最终要做的是一个具有固定宽度和基于百分比的高度的设计，其中子div也是基于百分比定位到他们的父母（我相信这是处理不同屏幕分辨率的正确方法）

如果有人能帮助我，我将非常感激。

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#wrapper { background:red; }
html,body{height:100%;}
#wrapper{min-height:100%;}
</style>
<!--[if IE 6]><style>
#wrapper { height:100%; }
</style><![endif]-->
</head>
<body>
<div id=wrapper>
  <p>Hello from JS Bin</p>

  <p id="hello"></p>
  </div>
</body>
</html>

Answer 2

目前尚不清楚您使用的是哪个版本的资源管理器（除了6个），但某些版本的min-height被height读取...

但是 - 这是构建HTML / CSS的专业（最简单的方式）方式：

验证您的HTML（非常重要，因为无效的HTML会以不可预知的方式混淆浏览器！）
让它工作，看看你喜欢FF;
为IE6和（如有必要）IE7和8添加条件注释。

在IE 6中，请记住填充等未添加到框中，因此会减小任何宽度或高度。此外，一些元素没有某些CSS属性，例如没有特定的宽度或高度（或auto），请勿trigger 'haslayout' in IE。

这可能没有直接解决问题，但我希望它能帮助解决问题！

Answer 3

虽然我很欣赏他的努力，但是meder的答案很有帮助，但不完整，因为我想要一个基于百分比的设计。戴夫的回答更像是指导方针。我的问题的最佳解决方案类似于： http://matthewjamestaylor.com/blog/perfect-3-column.htm

现在我的问题解决了，谢谢你的帮助。

doctype需要帮助

3 个答案: