三列浮动的div，如何让他们高度为100%

最近遇到问题，在扣去顶部的100px后，如何让他们撑满剩余高度。
不用javascript自然最好，如果js更方便的话也请一并告之吧
有实例有代码，请看：

HTML

<div class="header">header</div>
<div class="col1">col1</div>
<div class="col2">col2</div>
<div class="col3">col3</div>

CSS

.header {
    width: 100%;
    background: #567;
    height: 100px;
}

.col1, .col2, .col3 {
    float: left;
    width: 80px;
    background: #DDD;
    height: 100%;
    margin-right: 10px;
}

如果有footer的情况下

假如footer也要占位100px，一直位于下方，那中间这三列又该怎么弄呢？

http://jsfiddle.net/eLbJ3/

提问 2012年 12月1日 @ Hepheastus 上等兵 (182 威望)

分享到：

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">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <style type="text/css">
        .header {
            width: 100%;
            background: #567;
            height: 100px;
        }

        .col1, .col2, .col3 {
            float: left;
            width: 80px;
            background: #DDD;
            height: 100%;
            margin-right: 10px;
            word-wrap:break-word;
            overflow:hidden;
            padding-bottom:100%;
            margin-bottom:-98%;
            font-size:12px;
        }
        .foot{height:100px; background-color:#ccc;}
        .middle{overflow:hidden; zoom:1;}
    </style>
</head>
<body>

<div class="header">header</div>
<div class="middle">
    <div class="col1">111colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1222</div>
    <div class="col2">col2</div>
    <div class="col3">333colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1444</div>
</div>
<div class="foot">foot</div>

</body>
</html>

回复 2012年 12月1日 @ Kog'Maw 上等兵 (212 威望)

三列浮动的div，如何让他们高度为100%

你对此问题的评论:

你的回答

1个回答

你的评论:

相关问题

热门标签