Home > Web Front-end > HTML Tutorial > There is a page divided into three parts from left to right. The height of the middle div increases as the data increases. How can I make the divs on the left and right sides also grow? _html/css_WEB-ITnose

There is a page divided into three parts from left to right. The height of the middle div increases as the data increases. How can I make the divs on the left and right sides also grow? _html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:24:04
Original
1789 people have browsed it



最右边的窄边,高度是repeat的。
css如下:

.rightLine {    height: 955px;    background-image: url(/LogService/images/right.jpg);    background-repeat: repeat-y;    width: 26px;    position: absolute;    top: 54px;    left: 1225px;;}
Copy after login


中间的数据是跟微博一样,每次拉倒最下面加载新数据,所以中间的数据div越来越长。

但是左右两边div的长度不会跟着变化,有没有人有好的办法?


回复讨论(解决方案)

左右两边做成跟加载div块一体的,加载div块的同时也加了两边

用js控制div高度,使得较矮的两个等于最高的那个。

左右两边不就是点背景吗
把背景 给父级就行可以了吗, 两个背景 ,给两个div 里面 再分左中右 这样 有一个高度变化 而父级两个背景也会变化

用js控制div高度,使得较矮的两个等于最高的那个。

你说的这个方法我试过,是不行的 ,不是瞬时的变化,非要等到中间的加载完,两边才突然变长,很不和谐!!!

左右两边不就是点背景吗
把背景 给父级就行可以了吗, 两个背景 ,给两个div 里面 再分左中右 这样 有一个高度变化 而父级两个背景也会变化


你说的这个我怎么看不懂呢,说的有点乱,可以的话,可以QQ教小弟一下么?

左右两边做成跟加载div块一体的,加载div块的同时也加了两边

你说的这个我好想有点懂了,不过具体怎么做还是不太清楚,求赐教,方便的话,留下QQ,教一下小弟弟,小弟弟感激不尽!





.div1 {background:url(img/left.png) repeat-y 0 0;}
.div2 {background:url(img/right.png) repeat-y right 0;}
这能看明白吗 只要中间的内容 增加 左右两块的背景 也会变高








里面的布局当然 你知道了,只是 背景不太明白,用我上面的方法 应该能理解吧
这样 里面 任何一个高度增加 父级的两个背景都会 增高 也就是等高





.div1 {background:url(img/left.png) repeat-y 0 0;}
.div2 {background:url(img/right.png) repeat-y right 0;}
这能看明白吗 只要中间的内容 增加 左右两块的背景 也会变高








里面的布局当然 你知道了,只是 背景不太明白,用我上面的方法 应该能理解吧
这样 里面 任何一个高度增加 父级的两个背景都会 增高 也就是等高


我感觉你理解错我的意思了。




我的布局这是这样的 ,center就是数据div,高度一直变大,left和right需要随着center Div变化.
不知道这个怎么实现



你的意思是中间的高度变化有动画效果吗,
如果可以的话把左右div改成一个大的div套在中间div的外面,这样行么

<div class="left"></div><div class="center"></div><div class="right"></div>
Copy after login


$(".left").height($(".showListDiv").height());$(".right").height($(".showListDiv").height());
Copy after login


ajax每次加载数据之后,在for循环后面加上这两句话就OK了,试试吧!!!






.div1 {background:url(img/left.png) repeat-y 0 0;}
.div2 {background:url(img/right.png) repeat-y right 0;}
这能看明白吗 只要中间的内容 增加 左右两块的背景 也会变高








里面的布局当然 你知道了,只是 背景不太明白,用我上面的方法 应该能理解吧
这样 里面 任何一个高度增加 父级的两个背景都会 增高 也就是等高


我感觉你理解错我的意思了。




我的布局这是这样的 ,center就是数据div,高度一直变大,left和right需要随着center Div变化.
不知道这个怎么实现




难道不是这样吗,左右两边增高,并一定div高度变高,你的不就是背景吗?
两边是图, 这个方法可行
如果你觉得两边是 高度要变化或内容 增高,那 得用js
看你怎么理解了,

我有个办法可以不用js,利用table的td特性,当然你也可以不用table标签,用display:table和table-cell,效果一样的。demo代码如下:

<!DOCTYPE html><html>    <head>        <title>Test</title>        <meta charset="utf-8">        <style type="text/css">            .green{                background-color:green;            }            .yellow{                background-color:yellow;            }            .red{                background-color:red;            }            table{                height:500px;            }            td{                width:200px;            }        </style>    </head>    <body>        <table>            <tr>                <td class="green"></td>                <td class="yellow" id="main"></td>                <td class="red"></td>            </tr>        </table>        <script type="text/javascript" >            window.onload = function(){                var obj = document.getElementById('main');                function getData(){                    var str = obj.innerHTML, i, len, temp = "";                    for(i=0,len=20;i<len;i++){                        temp += i+"<br/>";                    }                    obj.innerHTML = str + temp;                }                setTimeout(function(){                    getData();                    setTimeout(arguments.callee, 2000);                },2000);            }        </script>            </body></html>
Copy after login
Copy after login

我有个办法可以不用js,利用table的td特性,当然你也可以不用table标签,用display:table和table-cell,效果一样的。demo代码如下:

<!DOCTYPE html><html>    <head>        <title>Test</title>        <meta charset="utf-8">        <style type="text/css">            .green{                background-color:green;            }            .yellow{                background-color:yellow;            }            .red{                background-color:red;            }            table{                height:500px;            }            td{                width:200px;            }        </style>    </head>    <body>        <table>            <tr>                <td class="green"></td>                <td class="yellow" id="main"></td>                <td class="red"></td>            </tr>        </table>        <script type="text/javascript" >            window.onload = function(){                var obj = document.getElementById('main');                function getData(){                    var str = obj.innerHTML, i, len, temp = "";                    for(i=0,len=20;i<len;i++){                        temp += i+"<br/>";                    }                    obj.innerHTML = str + temp;                }                setTimeout(function(){                    getData();                    setTimeout(arguments.callee, 2000);                },2000);            }        </script>            </body></html>
Copy after login
Copy after login

觉得LS的方案可行,LZ可以在外面套上TABLE,单行三列,左右两列的高度设为Auto,中间列高度变化后,左右两列列高会自动增加。
或者使用JS控制,当中间DIV高度发生变化,就改变左右两个DIV的高度

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template