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

WBOYOriginal: 2016-06-24 12:24:041790browse

最右边的窄边，高度是repeat的。
css如下：

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

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

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

回复讨论(解决方案)

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

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

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

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

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

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

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

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

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

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

8a4a534d75f1e59067b19e1a5be6fbfb
02dc0cd488cc31b78de4eb26f3761df4
    1201755a16c17bb0d9ea502d4723f8f216b28748ea4df4d9c2150843fecfba68
    cb103f88f4d4a013c42f2e1224b5bf7c16b28748ea4df4d9c2150843fecfba68
    449a3f648c0a9150d90826a379b1bfd916b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
里面的布局当然你知道了，只是背景不太明白，用我上面的方法  应该能理解吧
这样里面任何一个高度增加父级的两个背景都会增高   也就是等高

我感觉你理解错我的意思了。
1201755a16c17bb0d9ea502d4723f8f216b28748ea4df4d9c2150843fecfba68
cb103f88f4d4a013c42f2e1224b5bf7c16b28748ea4df4d9c2150843fecfba68
449a3f648c0a9150d90826a379b1bfd916b28748ea4df4d9c2150843fecfba68

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

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

<div class="left"></div><div class="center"></div><div class="right"></div>

$(".left").height($(".showListDiv").height());$(".right").height($(".showListDiv").height());

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

我有个办法可以不用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>

我有个办法可以不用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>

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

Statement：

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

Previous article：xml=new ActiveXObject("Microsoft.XMLHTTP")出错_html/css_WEB-ITnoseNext article：xml=new ActiveXObject("Microsoft.XMLHTTP")出错_html/css_WEB-ITnose

See more

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

回复讨论(解决方案)

Related articles