一个CSS有关问题

一个CSS问题

HTML code


  <style type="text/css">
        .new
        {
            width: 1000px;
            height:100%;
            margin:auto;
            padding: 10px;
            background-color: #F9F8F8;
            border-right-style: groove;
            border-left-style: groove;
            border-bottom-style:groove;
            border-right-width: thin;
            border-left-width: thin;
        }
    </style>
<body>
    <form id="form1" runat="server">
    <div class="new">
     
      
    </div>
    </form>
</body>

现在是DIV内有多少内容就显示多height，离底部BODY还有一片空白区.怎么修改CSS，不管DIV内容多少，都能自动的让DIV从BODY头部一只到BODY尾部

------解决方案--------------------

HTML code

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

</style>
</head>

<body>
<style type="text/css">
        *{margin:0; padding:0;}
        .new
        {
            width: 1000px;
            height:auto !important;
            min-height:827px;
            height:827px;
            margin:auto;
            padding: 10px;
            background-color: #F9F8F8;
            border-right-style: groove;
            border-left-style: groove;
            border-bottom-style:groove;
            border-right-width: thin;
            border-left-width: thin;
        }
    </style>
    <form id="form1" runat="server">
    <div class="new">
     
      
    </div>
    </form>
</body>
</html>

------解决方案--------------------
body其实长得也象个div。

body是其他的div的父标签。

当你div的高度是100%时，这个100%是指父标签的高度。

body相对于html也是同样。

所以你要将html,body 先设置为高度100%

html的100%来源于window的高度。

相关推荐