关于DIV三列布局设计问题，各位大佬帮小弟看一下！

「已注销」 2018-12-17 10:55:53

各位大佬！
小弟是刚接触DIV+css，用DIV+CSS实现三列布局！
可是在设计途中遇到了DIV的百分比高度不能随浏览器高度而伸缩，下面附上代码，请大佬们，给小弟指点下！在此抱拳谢过



<!DOCTYPE html>

<html>

<head>

<title>三列自适应高度DIV布局</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

* { margin:0; padding:0;}

html,body { height:100%;width:100%;}

.grid {

	width:100%;

	height:100%;

	}

#div-middle-02 {

    float: left;

    background-color: #fff9ca;

    width: 100%;

    height: 100%;

}

#middle-wrap-02 {

	height:100%;

    margin: 0 220px 0 217px;

}

#div-left-02 {

    float: left;

	position: relative;

    background-color: red;

    width: 217px;

    margin-left: -100%;

    height: 100%;



}



#div-right-02 {

    float: left;

	position: relative;

    background-color: yellow;

    width: 220px;

    margin-left: -220px;

    height: 100%;

}

</style>

</head>

<body>

    <div class="grid">

        <div id="div-middle-02">

        	<div id="middle-wrap-02">

            	<div class="top" style="height:62px; border-bottom:1px solid #000; border-top:1px solid #000; margin-bottom:2px;">

        			1

                </div>

                <div class="msg0" style="height:38%; border-bottom:1px solid #000; border-top:1px solid #000; margin-bottom:2px;">

                    2

                </div>

                <div class="msg2" style="height:31px; border-bottom:1px solid #000; border-top:1px solid #000; margin-bottom:2px;">

                    3

                </div>

                <div class="msg1" style="height:38%; border-bottom:1px solid #000; border-top:1px solid #000; margin-bottom:2px;">

                    4

                </div>

                <div class="bt" style="height:29px; border-top:1px solid #F00;">

                    5

                </div>

                <div class="f2" style="height:94px; border:0px solid #F00; background-color: #C9C">

                    6

                </div>

            </div>

        </div>

        <div id="div-left-02"><span>div-left</span></div>

        <div id="div-right-02"><span style="border:1px solid #00F">div-right</span></div>

    </div>

</body>

</html>

中间的top,msg0,msg2,msg1,bt,f2,这几个DIV在各个浏览器中，有点能铺满浏览器高度，有点不能铺满，没分了，还请各位大佬，指点小弟！

...全文

615 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

「已注销」 2018-12-17

打赏
举报



<!DOCTYPE html>

<html>

<head>

<title>三列自适应高度DIV布局</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

* { margin:0; padding:0;}

html,body { height:100%;width:100%;}

.grid {

	width:100%;

	height:100%;

	}

#div-middle-02 {

    float: left;

    background-color: #fff9ca;

    width: 100%;

    height: 100%;

}

#middle-wrap-02 {

	height:100%;

    margin: 0 220px 0 217px;

}

#div-left-02 {

    float: left;

	position: relative;

    background-color: red;

    width: 217px;

    margin-left: -100%;

    height: 100%;



}



#div-right-02 {

    float: left;

	position: relative;

    background-color: yellow;

    width: 220px;

    margin-left: -220px;

    height: 100%;

}

</style>

</head>

<body>

    <div class="grid">

        <div id="div-middle-02">

        	<div id="middle-wrap-02">

            	<div class="top" style="height:62px; border-bottom:1px solid #000; border-top:1px solid #000; margin-bottom:2px;">

        			1

                </div>

                <div class="msg0" style="height:38%; border-bottom:1px solid #000; border-top:1px solid #000; margin-bottom:2px;">

                    2

                </div>

                <div class="msg2" style="height:31px; border-bottom:1px solid #000; border-top:1px solid #000; margin-bottom:2px;">

                    3

                </div>

                <div class="msg1" style="height:38%; border-bottom:1px solid #000; border-top:1px solid #000; margin-bottom:2px;">

                    4

                </div>

                <div class="bt" style="height:29px; border-top:1px solid #F00;">

                    5

                </div>

                <div class="f2" style="height:94px; border:0px solid #F00; background-color: #C9C">

                    6

                </div>

            </div>

        </div>

        <div id="div-left-02"><span>div-left</span></div>

        <div id="div-right-02"><span style="border:1px solid #00F">div-right</span></div>

    </div>

</body>

</html>