css 实现相邻DIV等高

如下图所示，我们需要展示一个详情信息表（非Table组件，非table标签），这个时候，由于背景色的原因，如果不等高，在多行数据的情况下，左边的灰色背景只有下图的一半高度左右，剩下的都是空白，那么如何用css实现等高呢？ 

思路是：1.父组件 overflow: hidden  2.子组件 对应元素padding-bottom: 500px; margin-bottom: -500px; 

500px只是根据需要去确定的，我完全可以确定数据不会超出这个范围的高度，您可以根据自己需要去设置更大值，务必保证高度大于内容高度！

 

 我们以React框架为例子：

 

父组件

render() {
		const labelOptions = this.getCustBasicTpl();
		return (
			<div style={{ border: '1px solid #ddd' }}>
				<Row gutter={40}>
					<LabelGroup labelOptions={labelOptions} />
				</Row>
			</div>
		);
	}

子组件 

/*

 * @Description: In User Settings Edit

 * @Author: your name

 * @Date: 2019-09-11 15:43:05

 * @LastEditTime: 2019-09-16 10:49:43

 * @LastEditors: Please set LastEditors

 */

// 通用组件

import React from 'react';

import { Button, Row, Col } from 'antd';

import { connect } from 'react-redux';

import { showSpinCreator, hideSpinCreator } from '../../redux/Spin';

import { bindActionCreators } from 'redux';



/** 

 * @param col: 列数为1 或者 2

 * @param label: [] || '' 列标签组成的数组 如果只有1列 不需要数组 直接写标签名

 * @param value: [] || '' 列值组成的数组 如果只有1列 不需要数组 直接写值

 */



class LabelGroup extends React.Component {

  constructor(props) {

    super(props);

    this.state = {



    }

  }



  render() {

    const { labelOptions } = this.props;



    const common = {

      padding: '10px 10px',

      paddingBottom: 300,

      marginBottom: -290,

    };



    const colBStyle = {

      borderTop: '1px solid rgb(221, 221, 221)',

      borderLeft: '1px solid rgb(221, 221, 221)',

    };



    const colANormal = {

      borderTop: '1px solid rgb(221, 221, 221)',

      background: '#f6f6f6',

    };



    const colBNormal = {

      borderTop: '1px solid rgb(221, 221, 221)',

      borderLeft: '1px solid rgb(221, 221, 221)',

      background: '#f6f6f6',

    };



    return <div style={{ marginTop: -1, }}>

      {

        labelOptions && labelOptions.map((item, index) => {

          const isLast = index === labelOptions.length - 1;



          return <div key={index} style={{ overflow: 'hidden', }}>

            {

              item.col === 1 ? <Row>

                <Col span={4} style={{ ...common, ...colANormal }}>{item.label}</Col><Col style={{ ...common, ...colBStyle }} span={20}>{item.value || '--'}</Col>

              </Row> : <Row>

                  <Col span={4} style={{ ...common, ...colANormal }}>{item.label[0]}</Col><Col style={{ ...common, ...colBStyle }} span={8}>{item.value[0] || '--'}</Col>

                  <Col span={4} style={{ ...common, ...colBNormal }}>{item.label[1]}</Col><Col style={{ ...common, ...colBStyle }} span={8}>{item.value[1] || '--'}</Col>

                </Row>

            }

          </div>

        })

      }

    </div>

  }

}

const mapStateToProps = (state) => {

  return {

    accessCollection: state.Login.accessCollection

  };

};



const mapDispatchToProps = (dispatch) => {

  return {

    dispatchs: dispatch,

    showSpin: bindActionCreators(showSpinCreator, dispatch),

    hideSpin: bindActionCreators(hideSpinCreator, dispatch)

  };

};



export default connect(mapStateToProps, mapDispatchToProps)(LabelGroup);