Question

我有一个场景，我有一个容器div和2个孩子div。子div将在内部有行，数据将是动态的。所以，这些的高度可能会有所不同。容器高度是固定的。我想要的是：

1）如果child1的数据较少，那么它应该根据需要占用高度，并且应该由child2占用休息高度（假设它有足够的数据），反之亦然，使用自动垂直滚动条

2）如果两者都有较少的数据，则两者都应占据50％的高度

3）如果两者都有大量数据，那么两者都应该占据50％的高度，每个都有垂直滚动条

HTML：

NSMutableString * requestStr = [NSMutableStringstring];

[requestStr appendString:soapHeader];

NSString * urlStr = @"http://www.webservicex.net/geoipservice.asmx?WSDL";

NSURL * url = [NSURL URLWithString:urlStr];

NSMutableURLRequest * request = [[NSMutableURLRequestalloc] initWithURL:url];

[request setValue:@"http://www.webservicex.net/GetGeoIP" forHTTPHeaderField:@"SOAPAction"];

[request setValue:@"http://www.webservicex.net/" forHTTPHeaderField:@"targetNamespace"];

[request setValue:@"text/xml;charset=UTF-8"forHTTPHeaderField:@"Content-Type"];

[request setHTTPBody:requestBody];

[request setHTTPMethod:@"POST"];

[request setValue:[NSStringstringWithFormat:@"%d",[requestBody length]] forHTTPHeaderField:@"Content-Length"];

[NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {

    BOOL isSuccess = YES;

    NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *)response;

    NSLog(@"received data---%@",response);

    if(connectionError != nil) {

        isSuccess = NO;

        NSLog(@"connection error with code %d",connectionError.code);

    }

    NSDictionary * responseDictionary = [NSDictionary dictionary];

    if([httpResponse statusCode] == 200) {

        isSuccess = YES;

     //Do something with the received dictionary.

}];

CSS

    <div class="parent">
    <div class="child1"> 
        <div style="height:30px; width:100%;background:red;"></div> 
        <div class="inner-child">
            child1<br>child1<br>child1<br>child1<br>child1<br>child1<br>child1<br>child1<br>
        </div>

    </div>
    <div class="child2">
    <div style="height:30px; width:100%;background:red;"></div> 
         <div class="inner-child">
            child2<br>child2<br>child2<br>child2<br>child2<br>child2<br>child2<br>child2<br>
        </div>
    </div>
</div>

的jsfiddle https://jsfiddle.net/mqa4g74s/2/

我无法解决这个问题。尝试了不同的方法，但都是徒劳的。任何帮助将不胜感激。

Answer 1

display: flexbox。

DEMO

flex-direction: column将儿童展示位置设置为垂直轴

flex-grow: 1让孩子们平等地成长到给定的空间

Read more about flexbox in this wonderful article

/编辑

自动调整div容器内的子div的高度

1 个答案:

DEMO

Updated Demo