当前位置：首页 → 问答吧 → 一个CSS问题

一个CSS问题

时间：2011-12-05

来源：互联网

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尾部

作者: xuhui3124563 发布时间: 2011-12-05

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>

作者: MuBeiBei 发布时间: 2011-12-05

HTML code


<style type="text/css">
        body, form{font-size:0;margin:0;padding:0}
        .new
        {
            font-size:14px;
            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>
<script>
window.onload=function(){
    var div = document.getElementById('pad');
    var body = document.compatMode=="CSS1Compat"?document.documentElement:document.body;
    div.style.height = body.clientHeight>parseInt(div.clientHeight,10)?body.clientHeight:parseInt(div.style.height,10)
}
</script>
<body>
    <form id="form1" runat="server">
    <div class="new" id="pad">
     
      
    </div>
    </form>
</body>

作者: hookee 发布时间: 2011-12-05

一个CSS问题

热门阅读

热门下载