Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Opening page 100% large in browser window?

    Hi.
    This should be fairly simple.
    I am trying to open a map page so that it fills 100% of browser window
    I have program that auto generates this page:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <title>LeafLet Preview</title>
      <meta charset="utf-8" />
    
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
      <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><![endif]-->
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <style type="text/css">
        #basemapslidercontainer {
          position: absolute;
          top: 50px;
          right: 10px;
          z-index: 1000;
        }
    
        #basemapslider{
          font-size:62.5%;
          margin: 14px;
          height: 125px;
          width:7px;
        }
    
        #map{
           width: 800px;
           height: 600px
        }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
      <script>
        $(document).ready(function () {
          $("#basemapslider").slider({
                animate: true,
                value: 1,
                orientation: "vertical",
                min: 0,
                max: 1,
                step: 0.1,
                slide: function (event, ui) {
                    mytile.setOpacity(ui.value);
                }
           });
    
            $('#basemapslider').mousedown(function(){
              map.dragging.disable();
            })
    
            $('#basemapslider').mouseup(function(){
              map.dragging.enable();
            })
    
          var map = L.map('map').setView([61.5330940934, 23.2794142582], 8);
          var baselayer = L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
            maxZoom: 16,
          }).addTo(map);
    
         
          L.control.layers({'Basemap':baselayer}).addTo(map);
        })
      </script>
    </head>
    <body>
      <div id="map">
        <div id="basemapslidercontainer">
          <div id="basemapslider">
        </div>
      </div>
      </div>
    </body>
    </html>
    it works fine but i would like it to use 100% of browser window.
    so i try to replace this:

    Code:
    #map{
           width: 800px;
           height: 600px
        }
    with this:

    #map{
    width: 100%;
    height: 100%
    }
    but it does not work?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,637
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Unlike a relative width wich is automatically 100% a height collapses by default, so a percent unit doesn’t work unless the parent element has a set height, too. For this to work you need to go all the way to the root element (<html>):
    Code:
    html {height: 100%;}
    body {min-height: 100%;}
    #map {height: 100%;}

  • Users who have thanked VIPStephan for this post:

    Total N00b (10-13-2013)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, so how i should apply that to my first example?

    And why something like this works just fine?
    Code:
    <html>
    <head>
         <link rel="stylesheet" 
              href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    </head>
    <body>
        <div id="map" style="width: 100%; height: 100%"></div>
     
        <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    
        <script>
                var map = L.map('map').setView([61.5330940934, 23.2794142582], 11);
    		L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
            maxZoom: 16,
          }).addTo(map);
    		</script>
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, now after 3 minutes of googling i found this : http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

    I just needed it explained like you would explain it to total noob

    so when i add
    Code:
    html {
    	height: 100%;
    }
    body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    to style, it starts to work...

  • #5
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by Total N00b View Post
    And why something like this works just fine?
    Code:
    <html>
    <head>
    [...]
    Because you have no doctype specified and your browser runs in quirks mode.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •