用CSS使2个DIV高度自适应

最新推荐文章于 2023-05-11 09:56:52 发布

think_huang

最新推荐文章于 2023-05-11 09:56:52 发布

阅读量868

点赞数

文章标签： div css float xhtml 浏览器 html

1、纯CSS方法

css里代码（调试通过，但不会显示div下边框，即border-bottom）：

/*左右自适应相同高度start*/
#m1,#m2
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#m1,#m2
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#m1:before, #m2:before
{
content: ’[DO NOT LEAVE IT IS NOT REAL]‘;
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/*左右自适应相同高度end*/

2、加背景图片

这个方法，很多大网站在使用，如163，sina等。

XHTML代码：

<div id=”wrap”>
<div id=”column1″>这是第一列</div>
<div id=”column1″>这是第二列</div>
<div class=”clear”></div>
</div>

CSS代码:

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

实例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList.aspx.cs" Inherits="UserList" %>

<!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 runat="server">
    <title>Extjs-用户列表</title>
       <style type="text/css">
        #wrap
        {
            overflow: hidden;
            width: 800px;
            margin: 0 auto;
        }
        #sideleft
        {
            float: left;
            width: 500px;
        }
        #sideright
        {
            float: right;
            width: 300px;
            background-color: #cdcdcd;
        }
        #sideleft, #sideright
        {
            padding-bottom: 32767px !important;
            margin-bottom: -32767px !important;
        }
        @media all and(min-width:0)
        {
            #sideleft, #sideright
            {
                padding-bottom: 32767px !important;
                margin-bottom: -32767px !important;
            }
            #sideleft:before, #sideright:before
            {
                content: ’[DO NOT LEAVE IT IS NOT REAL]‘;
                display: block;
                background: inherit;
                padding-top: 32767px !important;
                margin-bottom: -32767px !important;
                height: 0;
            }
        }
        #footer
        {
            width: 800px;
            float: left;
            background-color:#eaeaea;
        }
        #header
        {
        background-color:#eaeaea;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1>
                Head</h1>
        </div>
        <div id="sideleft">
            <h2>
                sideleft</h2>
            <p>
                要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
            </p>
            <p>
                像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。
            </p>
            <p>
                采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
            </p>
            <p>
                也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
            </p>
            <p>
                要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
            </p>
            <p>
                 </p>
            <p>
                 </p>
            <p>
                 </p>
            <p>
                 </p>
            <p>
                 </p>
            <p>
                像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。
            </p>
            <p>
                采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
            </p>
            <p>
                也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
            </p>
        </div>
        <div id="sideright">
            <h2>
                sideright</h2>
            <p>
                要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
            </p>
            <p>
                像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。
            </p>
            <p>
                采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
            </p>
        </div>
        <div id="footer">
            <address>
                Footer
            </address>
        </div>
    </div>
</body>
</html>