Question

我有一个非常简单但令人困惑的问题我遇到的问题是我有一些div。第一个div固定在右上方，高度为100％，这个div在div2内有2个div，div3都应滚动。

其中一个uper div2的高度从100px变为200px之后应该滚动，id为div3的div应该是剩余的高度，如果数据增加则应该滚动。

我可以达到div2但div3没有达到剩余高度

我的代码是

    <div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
<div style="width:100%;min-height:100px;max-height:200px;background:blue;overflow:auto;float:left;">
    ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>
</div>
<div style="width:100%;height:300px;background:yellow;float:left;overflow:auto;">
    ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>
</div>

我需要一些浏览器友好的东西.. 如果你可以建议我一些非常有用的东西..

这是演示http://www.reurl.in/f84acc961

https://jsfiddle.net/fy727tLL/

Answer 1

这是更新的小提琴： Fiddle

<div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
  <div style="width:100%;height:20%;background:blue;overflow:auto;float:left;">
    ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>
  </div>
  <div style="width:100%;height:80%;background:yellow;float:left;overflow:auto;">
    ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>
  </div>
</div>

Answer 2

您可以执行的另一个选项是将div2设置为“固定”高度，然后将div2上方的边距设置为相同的高度，然后使用自动高度。这是一个JSfiddle，它做了一些非常接近你正在做的事情，但它更加风格化并且修复了顶级div：

http://jsfiddle.net/e13wzxgb/1/

    @Override
public void onLocationChanged(Location location) {
    if (paused){
        Runnable r = new Runnable() {
            @Override
            public void run() {
                handler.post(new Runnable() {
                    public void run() {
                        if (alarm){
                            double distance;
                            Location locationA = new Location("");
                            locationA.setLatitude(destlat);
                            locationA.setLongitude(destlng);
                            Location locationB = new Location("");
                            locationB.setLatitude(updLat);
                            locationB.setLongitude(updLng);
                            distance = locationA.distanceTo(locationB);
                            current_distance.setText("Current distance: " + Math.round(distance) + " m");
                            if(distance<rad){
                                alertUser();
                                alarm = false;
                            }
                        }
                    }
                });
            }
        };
        Thread bgAlarmThread = new Thread(r);
        bgAlarmThread.start();
    }else{
        updLat = location.getLatitude();
        updLng = location.getLongitude();
        locll = new LatLng(updLat,updLng);

        MarkerOptions locoptions = new MarkerOptions()
                .title("You are here")
                .position(locll)
                .icon(BitmapDescriptorFactory.fromResource(R.drawable.mapmarker));

        if (locmarker == null){
            gotoLocation(updLat, updLng, 15);
        }

        if(locmarker != null){
            locmarker2 = locmarker;
            locmarker2 = map.addMarker(locoptions);
            locmarker.remove();
            locmarker = null;
        }
        locmarker = map.addMarker(locoptions);
        if(locmarker2 != null){
            locmarker2.remove();
            locmarker2 = null;
        }



        if (alarm){
            double distance;
            Location locationA = new Location("");
            locationA.setLatitude(destlat);
            locationA.setLongitude(destlng);
            Location locationB = new Location("");
            locationB.setLatitude(updLat);
            locationB.setLongitude(updLng);
            distance = locationA.distanceTo(locationB);
            current_distance.setText("Current distance: " + Math.round(distance) + " m");
            if(distance<rad){
                alertUser();
                Toast.makeText(this,"Destination is now within your range",Toast.LENGTH_LONG).show();
                alarm = false;
            }
        }

        if (frag2.getVisibility() == View.VISIBLE){
            double distance;
            Location locationA = new Location("");
            locationA.setLatitude(destlat);
            locationA.setLongitude(destlng);
            Location locationB = new Location("");
            locationB.setLatitude(updLat);
            locationB.setLongitude(updLng);
            distance = locationA.distanceTo(locationB);


            EditText current_distance = (EditText)findViewById(R.id.currentDistance);
            current_distance.setText("Current distance: " + Math.round(distance) + " m");
        }




    }

}

希望能帮到你！

html div自动滚动的自动高度 - Div取剩余高度

2 个答案: