页脚位于弹性框项目上方.无法在页面末尾获得页脚.尝试使用网格和弹性框.这是带有网格的代码 [英] Footer coming over flex box items.Not able to get footer at the page end of page. tried using grid and flex box. This is the code with grid
问题描述
在使用Flexbox项目创建产品后，该页脚具有google地图位置和通讯详细信息，它越过具有产品图像的flexbox项目.我尝试使用各种解决方案，例如: 1.Giveing footer-margin-top:100％or 1000px;工作正常，但问题在移动"模式下再次出现. 2.创建显示:使用nav，main和footer标签(此处未提供代码)为体内的所有项目设置弹性列，并为下摆提供适当的增长，收缩和基值.它也没有用.
after creating products using flexbox items, the footer which has a google map location and communication details, it is coming over the flexbox items having product images. I have tried using various solutions like: 1.Giving footer - margin-top:100% or 1000px; working, but issue comes back in Mobile mode. 2.creating display: flex column for all the items inside the body, using nav, main and footer tags(that code is not given here) and giving hem appropriate growth, shrink and basis values. it too didn't work.
从StackOverflow中读取各种解决方案可以清楚地表明，使用Grid是一种有效的解决方案. 我尝试了这段代码，但它也没有起作用.请给一个可行的解决方案.预先感谢.
reading various solutions from StackOverflow made it clear that using Grid is an effective solution. I tried this code and it didn't work too. Please giver a feasible solution. Thanks in advance.
<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>
推荐答案
可能它已被主体部分覆盖，请尝试使主体部分的z-index为1，页脚z-index为2. 试试看，您会发现它出现在某个位置，并考虑了将其推下的逻辑.或者，您可以添加高边距顶部(例如1000px或其他值)，您将看到它出现. 它在那里，但是之前的代码重叠了. 试试吧
Probably it was covered by the main section, try and give the main section z-index of 1 And the footer z-index of 2. Try it you see it appear some where and think of a logic to push it down. Or in alternative that you may add high margin-top let's say 1000px or anything else, you will see it appear. It's there but it was overlaped by preceding codes. Try it
这篇关于页脚位于弹性框项目上方.无法在页面末尾获得页脚.尝试使用网格和弹性框.这是带有网格的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
