Question

我正在尝试将div中的谷歌地图修复为屏幕。左侧的地图应该是固定的，而右侧的内容应该是滚动的。我不知道如何实现这一点，因为我正在使用position:fixed，但似乎没有做到这一点。

尝试使用以下但不起作用：

#map {
    margin-left: -15px;
    position: fixed;
    top: 0;
}


<div class="mapViewTitle">
    <h3>Searching:</h3>
    <div class="typeMap">
        <p>Single Family Homes</p>
    </div>
    <div class="priceMap">
        <p>From $200,000 to $300,000</p>
    </div>
    <div class="mapDetail">
        <p>3+ br</p>
    </div>
    <div class="mapDetail">
        <p>2+ bth</p>
    </div>
</div>
<div class="searchResultsMapRight">
    <div class="propertyOverview mapView">
        <img src="resources/img/samplePropertyMap1.png" alt=""
            class="propertyImage">
        <div class="quickDetails">
            <p>5689 Main Ave</p>
            <p>Los Angeles, CA 90019</p>
            <p class="priceDetail">$556,000</p>
        </div>
        <div class="quickFacts">
            <div class="quickFact1">2 br</div>
            <div class="quickFact2">2 bth</div>
            <div class="quickFact3">4,000 SF</div>
            <div class="like mapViewDetail"><i class="fa fa-thumbs-up"></i></div>
        </div>
    </div>
    <div class="propertyOverview mapView">
        <img src="resources/img/samplePropertyMap2.png" alt=""
            class="propertyImage">
        <div class="quickDetails">
            <p>5689 Main Ave</p>
            <p>Los Angeles, CA 90019</p>
            <p class="priceDetail">$556,000</p>
        </div>
        <div class="quickFacts">
            <div class="quickFact1">2 br</div>
            <div class="quickFact2">2 bth</div>
            <div class="quickFact3">4,000 SF</div>
            <div class="like mapViewDetail"><i class="fa fa-thumbs-up"></i></div>
        </div>
    </div>
    <div class="propertyOverview mapView">
        <img src="resources/img/samplePropertyMap3.png" alt=""
            class="propertyImage">
        <div class="quickDetails">
            <p>5689 Main Ave</p>
            <p>Los Angeles, CA 90019</p>
            <p class="priceDetail">$556,000</p>
        </div>
        <div class="quickFacts">
            <div class="quickFact1">2 br</div>
            <div class="quickFact2">2 bth</div>
            <div class="quickFact3">4,000 SF</div>
            <div class="like mapViewDetail"><i class="fa fa-thumbs-up"></i></div>
        </div>
    </div>
</div>
</div>
</div>
</section>

Fixed position but relative to container

Answer 1

假设您将屏幕划分为两部分，一部分使用Google地图固定，另一部分则可以滚动。

所以你需要添加

#map {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
}

这将覆盖整个半部分现在您可以通过更改top，bottom，left，right的值来调整位置。

如果没有，您可以在此处查看我在谷歌地图上的工作http://wherewheater.bitballoon.com/

Answer 2

const express = require('express');
//let passport = require('passport');
//let session = require('express-session');
const app = express();


app.use(express.static(__dirname + '/public'));
app.use(express.json());
app.use(express.urlencoded({extended:false}));

app.get('/', (req, res) => {
  res.redirect('index.html');
});

app.post('/', (req, res) => {
})

app.use('/',require('./controllers'));

/*
app.use(express.session({ secret: 'keyboard cat' }));
app.use(passport.initialize());
app.use(passport.session());
*/
app.listen(3000);

      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }

#map{
  height:100vh;
}

Answer 3

尝试#map { position: fixed; top: 0; bottom: 0; } bottom: 0;将填充您的div。

Answer 4

您在代码中使用了很多类。它可能有助于将它们包含在div ID而不是部分中（我看到了一个结束部分标签，但不是一个开头？）在下面的代码片段中，我添加了2个div（带有id），分隔了2个代码段。我将地图设置为90vh，边距很小 - 我觉得它更容易找到 - 但如果你愿意，可以设置为100vh。

希望这有帮助

<div id="map"> <!---enclosed iframe of map in div id-->
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26446.690472440776!2d-118.35891963889674!3d34.04806981747934!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2b8f9683c5e93%3A0xeaed7d9ab5bc2296!2sLos+Angeles%2C+CA+90019%2C+USA!5e0!3m2!1sen!2sie!4v1513898452752"
    width="100%" height="100%" ; frameborder="0" style="border:0" allowfullscreen></iframe></div>


<div id="match"> <!---inserted separate div id here--->
  <div class="mapViewTitle" data_liveedit_tagid="000000001A4CF100">
    <h3>Searching:</h3>

    <div class="typeMap">
      <p>Single Family Homes</p>
    </div>

    <div class="priceMap">
      <p>From $200,000 to $300,000</p>
    </div>

    <div class="mapDetail">
      <p>3+ br</p>
    </div>

    <div class="mapDetail">
      <p>2+ bth</p>
    </div>
  </div>


  <div class="searchResultsMapRight">
    <div class="propertyOverview mapView"><img alt="" class="propertyImage" src="resources/img/samplePropertyMap1.png">
      <div class="quickDetails">
        <p>5689 Main Ave</p>

        <p>Los Angeles, CA 90019</p>

        <p class="priceDetail">$556,000</p>
      </div>

      <div class="quickFacts">
        <div class="quickFact1">2 br</div>

        <div class="quickFact2">2 bth</div>

        <div class="quickFact3">4,000 SF</div>

        <div class="like mapViewDetail">&nbsp;</div>
      </div>
    </div>

    <div class="propertyOverview mapView"><img alt="" class="propertyImage" src="resources/img/samplePropertyMap2.png">
      <div class="quickDetails">
        <p>5689 Main Ave</p>

        <p>Los Angeles, CA 90019</p>

        <p class="priceDetail">$556,000</p>
      </div>

      <div class="quickFacts">
        <div class="quickFact1">2 br</div>

        <div class="quickFact2">2 bth</div>

        <div class="quickFact3">4,000 SF</div>

        <div class="like mapViewDetail">&nbsp;</div>
      </div>
    </div>

    <div class="propertyOverview mapView"><img alt="" class="propertyImage" src="resources/img/samplePropertyMap3.png">
      <div class="quickDetails">
        <p>5689 Main Ave</p>

        <p>Los Angeles, CA 90019</p>

        <p class="priceDetail">$556,000</p>
      </div>

      <div class="quickFacts">
        <div class="quickFact1">2 br</div>

        <div class="quickFact2">2 bth</div>

        <div class="quickFact3">4,000 SF</div>

        <div class="like mapViewDetail">&nbsp;</div>
      </div>
    </div>
  </div>
</div>

<form class="searchwrapper" id='searchformmain' action="linkdsearchpagination.php" method="POST" enctype="multipart/form-data"  >

<input type="text" id="searchfor" name="searchfor" placeholder="What Are you Looking for?" class="textsearchmain" >


<button name="submitted" type="submitmain" action="submit" target='linkdsearchpagination.php' class="searchbuttonmain" >Search</button> 

</form>



    <div id="ggg" class="col">
        <h4 class="ban">Temp jobs</h4>
        <div class="cats">

            <ul id="tempjobs" data-loc-subject='temp jobs' class="left">


                    <li><strong>Creative</strong></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="tv film video">tv / film / video</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="crew">crew</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="talent">talent</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="event">event</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="labour">labour</a></li>

                <br>

                    <li><strong>Computer</strong></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="internet engineers">internet engineers</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="web info design">web/info design</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="writing editing">writing / editing</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="admin office">admin / office</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="art media design">art / media / design</a></li>


                <br>


                    <li><a href="" data-loc-subject='temp jobs' data-value="security"><strong>Security</strong></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="business">business</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="public">public</a><li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="domestic">domestic</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="personal">personal</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="transport">transport</a></li>


                <br>


                    <li><strong>Skilled trade / craft</strong></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="education">education</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="architech egineering">arch / engineering</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="legal paralaegal">legal / paralegal</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="business management">business / mgmt</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="accounting finance">accounting+finance</a></li>
                    <li><a href="" data-loc-subject='temp jobs' data-value="customer service">customer services</a></li>


            </ul>

        </div>
        </div>





</div> <!-----jobs--->








</div> <!----central column-------->


</div><!------WRAP-------->





</body>

</html>

<!---get list value and post to form--->
<script>
$("#jobs a,#tempjobs a,#community a,#dating a,#services a,#housing a,#forsale a").on("click", 
function(e) {e.preventDefault(); //prevent auto submitting the form

             $("#searchfor").val($(this).data('value'));   //get # id=searchfor input .value to this.data.value

             $("#catagorymain").val($(this).data('loc-subject')); //get # id=catagorymain .value to = this.data.value

            });
</script>

如何修复100vh div到屏幕？

4 个答案: