11

ฉันพยายามเปลี่ยนความสูงของแผนที่แผ่นพับเป็นเปอร์เซ็นต์ภายใน bootstrap แต่ทุกครั้งที่ทำแผนที่จะไม่วาด ดังนั้นฉันต้องเปลี่ยนกลับเป็นค่า px เสมอ ฉันค่อนข้างมั่นใจว่าเป็นการตั้งค่าแบบง่ายที่ฉันขาดไปตั้งแต่ฉันเป็นสามเณร CSS นี่คือ CSS ของฉัน

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
  }
</style>

web-mapping leaflet bootstrap-framework

— njackson.gis
แหล่งที่มา

3

โปรดระบุข้อมูลเพิ่มเติม: มาร์กอัปของคุณมีลักษณะอย่างไร คุณช่วยยกตัวอย่างเล็กน้อยที่แสดงปัญหาได้หรือไม่?

— atlefren

12

ฉันมักจะมีปัญหากับความสูงแผนที่ใน bootstrap เนื่องจากระยะขอบด้านบนอาจแตกต่างกันเมื่อความกว้างของแผนที่เปลี่ยนเพื่อให้ได้ความสูง 100% (แต่มีแถบนำทางที่ด้านบน) ฉันใช้

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

ซึ่งน่าเกลียด แต่ทำให้งานเสร็จ

— คาลวิน
แหล่งที่มา

6

[2020 อัพเดท]

ตั้งแต่ 2020/02/23 Flexbox มีการสนับสนุนเบราว์เซอร์ 95%และเป็นตัวเลือกที่ยอดเยี่ยมในการทำให้ Leaflet ตอบสนองโดยใช้คุณสมบัติยืดหยุ่นแบบขยาย

ดูตัวอย่าง CodePen ที่นี่

เป็นการตั้งค่าเพื่อที่จะยังคงแสดงผลบนเบราว์เซอร์ที่ไม่สนับสนุน Flexbox เพียงผู้ใช้เหล่านั้นจะต้องเลื่อน abit

¯ \ _ (ツ) _ / ¯

================================================== ==========

[โพสต์เก่า]

สิ่งนี้ใช้ได้สำหรับฉัน

หมายเหตุ: ฉันต้องการให้แผนที่ไม่กว้าง 100% บนหน้าจอขนาดใหญ่ดังนั้นฉันจึงเพิ่ม

.container{max-width:60em;} /* Remove for full screen */

HTML

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

CSS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.container{
    max-width:60em;
    padding: 0.2em;
}

— อุโมงค์ไปข้างหน้า
แหล่งที่มา

1

ทำงานให้ฉัน จริง ๆ แล้วคำตอบที่ดีที่สุด

— g07kore

5

ปัญหาคือ#mapลูกของbodyและคุณสามารถระบุเปอร์เซ็นต์ความสูงสำหรับองค์ประกอบเด็กถ้ามันเป็นผู้ปกครองมีความสูงที่กำหนดไว้อย่างชัดเจน

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
        height: 480px;
        }
    #map {
        height: 75%;
        }
</style>

สิ่งนี้จะสร้างสิ่งที่คุณต้องการ แต่พื้นที่ที่ใช้งานได้จะไม่โตขึ้น 75% จาก 480px โดยปกติจะdivยุบเมื่อไม่มีเนื้อหา แต่มี Leaflet แม้ว่าแผนที่ของคุณdivจะไม่คำนวณเมื่อแสดงผลดังนั้นจึงยุบเมื่อแสดงผล หากคุณต้องการให้เนื้อหาใช้พื้นที่แนวตั้งทั้งหมดคุณสามารถสอบถามขนาดหน้าต่างเมื่อโหลดหน้าเว็บด้วย Javascript และตั้งค่าความสูงได้

— RomaH
แหล่งที่มา

3

เพียงเพิ่มheight:100%ไปhtmlและbodyแท็กเพื่อให้พวกเขามีความสูงที่กำหนดไว้และสามารถนำมาใช้เป็นข้อมูลอ้างอิงและมันควรจะทำงาน

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
    html, body { 
        height:100%
    }
    #map {
        margin: 1em auto;
        height:70%;
        border: 2px dashed black;
    }                                                                                                                                                                                                            
</style>
</head>
<body>
    <h1>The map</h1>
    <div id="map"></div>
</body>
</html>

อ้างอิง:

คำถามที่เกี่ยวข้องของ Stackoverflow: Percentage Height HTML 5 / CSS
คุณยังสามารถดูมาตรฐาน W3C CSS 2.1เพื่อดูโมเดลกล่องและส่วนที่เกี่ยวกับการคำนวณความสูงและระยะขอบ

— pconcepcion
แหล่งที่มา

1

นี่คือวิธีที่จะไป

— George Silva

1

คำเตือน! หลังจากการทดสอบข้ามเบราว์เซอร์ฉันพบว่าคำตอบของฉันด้านล่างใช้ได้กับฉันเท่านั้นใน Chrome และไม่ใช่ใน Firefox

ฉันมีปัญหาเดียวกันและแก้ไขสิ่งนี้ด้วย display: table บน div หลักและ display table-cell ในแต่ละ div ขอบคุณคำตอบนี้ใน stackoverflow :

<div class="container body-container">

  <div class="col-md-6 side-container">
    <p>some stuff to</p>
    <p>fill the</p>
    <p>first colum</p>      
  </div><!-- /other column -->
  <div class="col-md-6 side-container">
    <div id="map"></div>
  </div><!-- /leaflet column -->
</div><!-- /container -->

และ CSS:

.body-container {
    display: table;
}
.side-container {
  float: none;
  display: table-cell;
  height:0;
}
#map {
    height: 100%;
}

— RvdBerg
แหล่งที่มา

การปรับขนาด Leaflet Map ภายใน bootstrap

อ้างอิง: