【发布时间】：2020-07-28 21:48:22
【问题描述】：
在使用 flexbox 项目创建产品后，具有谷歌地图位置和通信详细信息的页脚，它会出现在具有产品图像的 flexbox 项目上。我尝试过使用各种解决方案，例如： 1.Giving footer - margin-top:100% or 1000px;工作，但问题在移动模式下又回来了。 2.creating display: flex column 为body里面的所有项目，使用nav，main和footer标签（这里没有给出代码），并给下摆适当的增长，收缩和基础值。它也没有工作。
阅读 StackOverflow 的各种解决方案后，我们清楚地知道使用 Grid 是一种有效的解决方案。 我尝试了这段代码，但它也没有工作。请给出一个可行的解决方案。提前致谢。
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>SathaJeevana Ayur Foods</title>
<link rel="shortcut icon" href="C:\Users\Durga siva prasad\Desktop\sathajeevana\images\logo.png" type="image/png" >
<style>
.break {
flex-basis: 100%;
height: 0;
}
html,body{
height: 100%;
}
body{
margin: 0;
}
body {
display: grid;
grid-gap: 10px;
height: 100%;
grid-template-columns:1fr;
grid-template-areas:
"nav"
"main"
"footer";
grid-template-rows: 100px 1fr 80px;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
</style>
</head>
<body >
<a class="navbar-brand"><img src="C:\Users\Durga siva prasad\Desktop\sathajeevana\images\logo.png" type="image/png" height="70" width = "100" ></a>
<div class="collapse navbar-collapse d-flex flex-wrap align-items-center" id="nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item" >
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Contact Us</a>
</li>
<li class="nav-item dropdown active" data-toggle="dropdown">
<a class="nav-link font-weight-bold px-3 dropdown-toggle" style="color: #008000" href="#">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item font-weight-bold" style="color: #008000" href="prodcol.html/#foodproducts" target="_self">Food Products</a>
<a class="dropdown-item font-weight-bold" style="color: #008000" href="prodcol.html/#oilproducts" target="_self">Oil Products</a>
</div>
</li>
</ul>
</div>
<main>
<a name="foodproducts"></a>
<div class="d-flex justify-content-around align-items-center flex-wrap" style="height: 500px;">
<div class="p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\SaltF.jpg" height="300" width = "200" >
<p class="font-weight-bold text-center" style="color: #008000" >Ayur 2 Salt</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class=" p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\MilletsF.jpg" height="300" width = "200">
<p class="font-weight-bold text-center" style="color: #008000">Ayur Millet Rice</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class="break"></div>
<div class="p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\Oil.jpg" height="300" width = "700">
<p class="font-weight-bold text-center" style="color: #008000" >Cooking Oil</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class="break"></div>
<div>
</main>
<footer id="footer">
<div class="row">
<div class="col-sm-8" id="map" style="height:400px; background:gray;"></div>
<div class="col-sm-4 " style = " display: flex; align-items: center ; justify-content: center" >
<p class=" font-weight-bold" style="text-align: center ">
<span style="color:green">Plot no: 12,<br>P.S.R. Colony,<br>Vizianagaram - 535002<br><br>
</span>
<span style="color:green">
8340979799 </br>
<a href="mailto:sathajeevanafoods@gmail.com?cc=rvthridarmafoundation@gmail.com&subject=Enquiry%20regarding%20product%20from%20sathajeevana.in&body=I%20would%20like%20more%20information%20on%20product%20" target="_blank">sathajeevanafoods@gmail.com </a>
</span>
</p>
</div>
</div>
</footer>
<!-- jquery lib-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--fontawesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<!--This is used for search icon. Instead putting icon manually it is loaded from fontawesome-->
<!-- MAP scripts -->
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(18.1184,83.41799),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
【问题讨论】：