css display:table 테이블 레이아웃 사용 시 문제

Question

현재 openlayers 라는 지도 뷰어 라이브러리를 이용해서 지도를 4분할 하는 코드를 작성중인데요, 지도가 보여지는 영역을 display:table로 테이블 레이아웃으로 하고 열과 행에 table-row와 table-cell을 적용하였습니다. 문제는 버튼 클릭 시 실행 되는 함수의 파라미터에 따라서, 화면의 2,4분할이 나눠지는데 화면 분할 시에 지도 영역이 일정하게 나눠지지 않고, 각 영역 크기도 일정 범위에서만 변경이 됩니다. (지도를 렌더링 하지 않았을 때는 자유롭게 변경이 됩니다.) 그래서 여쭤보고 싶은 것은 1. table 레이아웃으로 위와 같은 구현이 가능한지 2. 각 영역의 크기를 일정하게 배분하고, div 컨테이너에 딱 들어 맞게 할 수 있는지. 입니다. html

csshtml,body { height: 100%; width : 100%; margin: 0px; overflow: hidden ; } #header { height: 10%; width: 100%; background-color: silver; float: left; } #main { height: 90%; width: 100%; } #contents { height: 100%; width: 100%; } #fullscreen { height: 100%; width: 100%; display: table; table-layout: fixed; } #map13 { display: table-row; } #map1 { display: table-cell; border:1px solid black; } #map3 { display:none; border:1px solid black; } #map24 { display:none; } #map2{ display: table-cell; background-color: darkslategray; border:1px solid black; } #map4 { display: table-cell; border:1px solid black; } js 혹시 몰라 지도 초기화 부분도 같이 올렸습니다. var mainMap,view,overViewMap; var BgLayer = function (layerName, layerType, imgType) { this.layerName = layerName; this.layerType = layerType; this.imgType = imgType; } BgLayer.prototype.initLayer = function (){ var reqUrl = "http://xdworld.vworld.kr:8080/2d/", url = reqUrl+this.layerName+"/service/{z}/{x}/{y}."+this.imgType; return new ol.layer.Tile({ title : this.layerName +' Map', visible : true, name: this.layerName, type : this.layerType, crossOrigin: 'anonymous', source: new ol.source.XYZ({ url: url }) }) } var bgLayerArr = { satellite : new BgLayer('Satellite','satellite','jpeg'), hybrid : new BgLayer('Hybrid','hybrid','png'), base : new BgLayer('Base','base','png') }; var satelliteLayer = bgLayerArr.satellite.initLayer(), hybridLayer = bgLayerArr.hybrid.initLayer(), baseLayer = bgLayerArr.base.initLayer(); $(document).ready(function () { initMap('map1'); }); function initMap(mapDiv) { console.log('initMapFn called'); proj4.defs('EPSG:5186', "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs"); ol.proj.setProj4(proj4); var scaleLineControl = new ol.control.ScaleLine({ minWidth: 100, units: 'metric' }); view = new ol.View({ center: [203720.96616096565, 543255.9138013487], zoom: 11 , minZoom: 8, maxZoom: 19, projection: new ol.proj.Projection({ code: 'EPSG:5186', units: 'm', global: false }) }); mainMap = new ol.Map({ layers: [], target: mapDiv, view: view, controls: ol.control.defaults({ zoom : false, attribution : false, attributionOptions: { collapsible: false } }) }); mainMap.addLayer(satelliteLayer); mainMap.addLayer(hybridLayer); } function divideMap(divisionType) { $('#map24').css('display','none'); $('#map3').css('display','none'); if(divisionType === 'four') { $('#map13').css('height','50%'); $('#map13').css('width','auto'); $('#map24').css('display','table-row'); $('#map3,#map4').css('display','table-cell'); } else if(divisionType === 'two vertical') { $('#map3').css('display','table-cell'); } else if(divisionType === 'two horizontal') { $('#map24').css('display','table-row'); $('#map4').css('display','none'); } else { } mainMap.updateSize(); }

css display:table 테이블 레이아웃 사용 시 문제

0개의 답변

Q&A 목록