html - 我想将页脚设置到窗口底部，但它与我的其他 div 重叠？

标签 html css angularjs

页脚与angular js生成的其他div和产品卡片重叠

试图把它放在除body以外的一些div中

<!DOCTYPE html>
<html>
<head>
<Title> 
Search Your City
</Title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <link rel="stylesheet" href="css/liststyle.css">
<script src="script/myscript.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">


 <div class="container" >
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />

 <link rel="stylesheet" href="css/main.css">
<div class="s003">


<form>

<div class="inner-form">
                 <div class="input-field second-wrap">
                <input id="search" type="text" placeholder="Enter Keywords?" />

                   </div>

     <div class="input-field third-wrap">

     <button class="btn-search" type="button">
      <svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
      </button>

      </div>

</div><!--inner form-->
</form>


</div><!--s003-->


<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <a href="home.html">Home</a>
       <a href="#help">Help</a>
      <a  id="myBtn"  href="#registrationpage">Sign Up</a>
      <a  id="myBtn1" href="#Loginpopup" >Login</a>
      <a href="#adminpage">Admin</a>
</div>


       <div class="topnav"  id="myTopnav">
        <a href="#hack"></a>
      <a href="home.html">Home</a>
       <a href="#help">Help</a>
      <a  id="myBtn"  href="#registrationpage">Sign Up</a>
      <a  id="myBtn1" href="#Loginpopup" >Login</a>
      <a href="#adminpage">Admin</a>
   <a href="javascript:void(0);" class="icon" onclick="openNav()">
    <i class="fa fa-bars"></i>
  </a>
    </div>

 </div> <!--container-->




<div class="acontainer">
<div class="card"  ng-repeat="x in records" style="margin:0 12px 12px 0;">
  <img src={{x.image}} alt="hotel image " ALIGN="left"   >
  <h1 >{{x.name}}</h1>
  <p class="price">{{x.price}}</p>
  <p>{{x.address}}</p>
  <p style="text-align:center"><button>Add to Cart</button></p>
</div>
<footer>
      <p>Moji Web Deisgn, Copyright &copy; 2019</p>
    </footer>
</div>




</body>



</html>

想要将页脚设置到窗口底部，如果我把它放在正文中，它会占用顶部导航栏的容器，如果我将它放在产品卡的容器中，则会重叠产品卡

找到 liststyle.css :

body, html {
  height: 100%;
  margin: 0;
}




/* Position the navbar container inside the image */
.container {
  position: absolute;
  float:left;
  margin: 20px;
 width: 100%;
 border-bottom: 0.5px solid #e6e6e6;
}

/* The navbar */
.topnav {
   float:right;
  overflow: hidden;
 // background-color: #333;

}

/* Navbar links */
.topnav a {
  float: left;
  color: #190808;
  text-align: center;
  padding: 24px 24px;
  text-decoration: none;
  font-size: 18px;
    right=42px;
    font-weight:1200px;
    border-bottom: 3px solid transparent;
}
a:last-of-type{



}
.h{



}


.topnav a:hover:not(:first-child) {

  border-bottom: 3px solid black;

}


.h input{
border:none;
focus:none;
}


.topnav .icon {
  display: none;
}

@media screen and (max-width: 1200px) {
   .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

.card{
position:relative;
top:50%;
width:100%;
}

}


@media screen and (max-width: 1200px) {
  .topnav.responsive {  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
 right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;    }



  .topnav.responsive a {
     padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  }
}

.responsive a:hover{
  color: #f1f1f1;
}

.topnav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}








fieldset {
padding: 0.35em 0.75em 0.625em;
}


fieldset {
margin: 0;
padding: 0;
-webkit-margin-start: 0;
 -webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
 border: 0;
}







* {
  box-sizing: border-box;
}

body {
  font: 16px Arial;  
}


.card {
  box-shadow: 0px 8px 8px 0px   rgba(0, 0, 0, 0.2);
  float: left;
  width: 24%;
  padding: 0 20px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: 0;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 150px;
  font-size: 18px;
}




.acontainer{
 position: absolute;
  top: 214px;
  left: 12%;
  right:12%;




}
.card button:hover {
  opacity: 0.7;
}
@media screen and (max-width: 992px) {


.card{
position:relative;
top:50%;
width:100%;
}


  }



@media screen and (max-height: 450px) {
  .responsive {padding-top: 15px;}
  .responsive a {font-size: 18px;}
}

footer{
position:absolute;
width:100%;
bottom:0;
  padding:20px;
  margin-top:20px;
  color:#ffffff;
  background-color:black;
  text-align: center;
height:240px;
}

和 main.css:

.s003{
  float: left;
  color: #190808;
   text-align: center;

  text-decoration: none;
  font-size: 18px;
    right=42px;
    font-weight:1200px;
    box-shadow: 0px 8px 8px 0px   rgba(0, 0, 0, 0.2);
    margin-left:3.3%;
    min-width:281.9px;
   width:42%;
}


.

s003 form {

width: 100%;
  max-width: 790px;

}


.s003 form .inner-form {
  background: #fff;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}


.s003 form .inner-form .input-field {
  height: 51px;
}


.s003 form .inner-form .input-field input {
  height: 100%;
  background: transparent;
  border: 0;
  display: block;
  width: 100%;
  padding: 10px 32px;
  font-size: 16px;
  color: #555;
}


.s003 form .inner-form .input-field input.placeholder {
  color: #888;
  font-size: 16px;
}

.s003 form .inner-form .input-field input:-moz-placeholder {
  color: #888;
  font-size: 16px;
}

.s003 form .inner-form .input-field input::-webkit-input-placeholder {
  color: #888;
  font-size: 16px;
}

.s003 form .inner-form .input-field input:hover, .s003 form .inner-form .input-field input:focus {
  box-shadow: none;
  outline: 0;
  border-color: #fff;
}

.s003 form .inner-form .input-field.first-wrap {
  width: 200px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.s003 form .inner-form .input-field.first-wrap .choices__inner {
  background: transparent;
  border-radius: 0;
  border: 0;
  height: 100%;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 10px 30px;
}.s003 form .inner-form .input-field.first-wrap .choices__inner .choices__item.choices__item--selectable.choices__placeholder {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  height: 100%;
  opacity: 1;
  color: #888;
}

.s003 form .inner-form .input-field.first-wrap .choices__inner .choices__list--single .choices__item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  height: 100%;
  color: #555;
}

.s003 form .inner-form .input-field.first-wrap .choices[data-type*="select-one"]:after {
  right: 30px;
  border-color: #e5e5e5 transparent transparent transparent;
}

.s003 form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown {
  border: 0;
  background: #fff;
  padding: 20px 30px;
  margin-top: 2px;
  border-radius: 4px;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
}

.s003 form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown .choices__item--selectable {
  padding-right: 0;
}

.s003 form .inner-form .input-field.first-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: #fff;
  color: #63c76a;
}

.s003 form .inner-form .input-field.first-wrap .choices__list--dropdown .choices__item {
  color: #555;
  min-height: 24px;
}

.s003 form .inner-form .input-field.second-wrap {
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.s003 form .inner-form .input-field.third-wrap {
  width: 74px;
}

.s003 form .inner-form .input-field.third-wrap .btn-search {
  height: 100%;
  width: 100%;
  white-space: nowrap;
  color: #fff;
  border: 0;
  cursor: pointer;
  background: #63c76a;
  transition: all .2s ease-out, color .2s ease-out;
}

.s003 form .inner-form .input-field.third-wrap .btn-search svg {
  width: 16px;
}

.s003 form .inner-form .input-field.third-wrap .btn-search:hover {
  background: #50c058;
}

.s003 form .inner-form .input-field.third-wrap .btn-search:focus {
  outline: 0;
  box-shadow: none;
}

@media only screen and (max-width: 374px) {

.s003{

min-width:162px;
}
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
 right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

我的脚本.js:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [{"id":1,"name":"Hatity","address":"Indonesia","price":69,"availability":false,"image":"https://robohash.org/itaquecumqueet.jpg?size=50x50&set=set1"},
{"id":2,"name":"Zaam-Dox","address":"Philippines","price":52,"availability":true,"image":"https://robohash.org/minimanequehic.bmp?size=50x50&set=set1"},
{"id":3,"name":"Rank","address":"United States","price":28,"availability":false,"image":"https://robohash.org/cumquequiavero.bmp?size=50x50&set=set1"},
{"id":4,"name":"Bamity","address":"Iran","price":25,"availability":false,"image":"https://robohash.org/consequaturimpeditaut.png?size=50x50&set=set1"},
{"id":5,"name":"Konklux","address":"Russia","price":70,"availability":true,"image":"https://robohash.org/repellendusfacereodit.jpg?size=50x50&set=set1"},
{"id":6,"name":"Tampflex","address":"Colombia","price":34,"availability":false,"image":"https://robohash.org/exvelet.png?size=50x50&set=set1"},
{"id":7,"name":"Lotlux","address":"East Timor","price":49,"availability":true,"image":"https://robohash.org/consequunturreiciendisratione.jpg?size=50x50&set=set1"},
{"id":8,"name":"Stim","address":"China","price":28,"availability":true,"image":"https://robohash.org/itaquecumqueet.jpg?size=50x50&set=set1"},
{"id":9,"name":"Prodder","address":"Colombia","price":52,"availability":true,"image":"https://robohash.org/delectusfacilisprovident.jpg?size=50x50&set=set1"},
{"id":10,"name":"Job","address":"Indonesia","price":6,"availability":true,"image":"https://robohash.org/omnisquiaincidunt.bmp?size=50x50&set=set1"},
{"id":11,"name":"Temp","address":"Malaysia","price":21,"availability":false,"image":"https://robohash.org/ullamquiet.jpg?size=50x50&set=set1"},
{"id":12,"name":"Mat Lam Tam","address":"Spain","price":24,"availability":false,"image":"https://robohash.org/quamaliquamvoluptate.jpg?size=50x50&set=set1"},
{"id":13,"name":"Bigtax","address":"Palestinian Territory","price":22,"availability":false,"image":"https://robohash.org/laudantiumpraesentiumhic.png?size=50x50&set=set1"},
{"id":14,"name":"Biodex","address":"Russia","price":5,"availability":true,"image":"https://robohash.org/doloremeaquesed.jpg?size=50x50&set=set1"},
{"id":15,"name":"Lotlux","address":"United States","price":66,"availability":false,"image":"https://robohash.org/perspiciatiseiusnatus.png?size=50x50&set=set1"},
{"id":16,"name":"Zontrax","address":"Jamaica","price":66,"availability":true,"image":"https://robohash.org/voluptatemconsecteturculpa.jpg?size=50x50&set=set1"},
{"id":17,"name":"Voltsillam","address":"Belgium","price":78,"availability":false,"image":"https://robohash.org/ipsavoluptatumamet.jpg?size=50x50&set=set1"},
{"id":18,"name":"Viva","address":"Tanzania","price":56,"availability":false,"image":"https://robohash.org/sedeosblanditiis.jpg?size=50x50&set=set1"},
{"id":19,"name":"Lotlux","address":"Australia","price":82,"availability":true,"image":"https://robohash.org/architectononperferendis.png?size=50x50&set=set1"},
{"id":20,"name":"Bitwolf","address":"Iran","price":95,"availability":false,"image":"https://robohash.org/sapientecupiditateconsequatur.jpg?size=50x50&set=set1"},
{"id":21,"name":"Holdlamis","address":"Philippines","price":68,"availability":true,"image":"https://robohash.org/eumprovidentarchitecto.jpg?size=50x50&set=set1"},
{"id":22,"name":"Otcom","address":"China","price":25,"availability":true,"image":"https://robohash.org/laboriosamsuntsoluta.jpg?size=50x50&set=set1"},
{"id":23,"name":"Ronstring","address":"Philippines","price":46,"availability":false,"image":"https://robohash.org/evenietvoluptatibuset.png?size=50x50&set=set1"},
{"id":24,"name":"Alpha","address":"Germany","price":64,"availability":false,"image":"https://robohash.org/saepenullatempore.bmp?size=50x50&set=set1"},
{"id":25,"name":"Sonair","address":"Vietnam","price":16,"availability":true,"image":"https://robohash.org/saepeevenietdeleniti.bmp?size=50x50&set=set1"},
{"id":26,"name":"Toughjoyfax","address":"Dominican Republic","price":84,"availability":true,"image":"https://robohash.org/etautanimi.bmp?size=50x50&set=set1"},
{"id":27,"name":"Zamit","address":"Sweden","price":41,"availability":false,"image":"https://robohash.org/doloreslaboriosamqui.png?size=50x50&set=set1"},
{"id":28,"name":"Wrapsafe","address":"Indonesia","price":76,"availability":false,"image":"https://robohash.org/suntisteillo.jpg?size=50x50&set=set1"},
{"id":29,"name":"Otcom","address":"El Salvador","price":89,"availability":false,"image":"https://robohash.org/eteaqueautem.png?size=50x50&set=set1"},
{"id":30,"name":"Alpha","address":"Egypt","price":81,"availability":true,"image":"https://robohash.org/reiciendisvoluptatemoptio.png?size=50x50&set=set1"},
{"id":31,"name":"Otcom","address":"Honduras","price":96,"availability":false,"image":"https://robohash.org/illononcum.jpg?size=50x50&set=set1"},
{"id":32,"name":"Voyatouch","address":"Peru","price":95,"availability":true,"image":"https://robohash.org/quisminimaeius.bmp?size=50x50&set=set1"},
{"id":33,"name":"Toughjoyfax","address":"China","price":49,"availability":false,"image":"https://robohash.org/officiasitet.png?size=50x50&set=set1"},
{"id":34,"name":"Tresom","address":"Philippines","price":39,"availability":false,"image":"https://robohash.org/repudiandaeestreiciendis.jpg?size=50x50&set=set1"},
{"id":35,"name":"Zathin","address":"Sweden","price":21,"availability":true,"image":"https://robohash.org/etveniamquasi.jpg?size=50x50&set=set1"},
{"id":36,"name":"Bitwolf","address":"Brazil","price":15,"availability":false,"image":"https://robohash.org/quossintnon.png?size=50x50&set=set1"},
{"id":37,"name":"Konklab","address":"Cuba","price":86,"availability":false,"image":"https://robohash.org/eumexplicaboquis.bmp?size=50x50&set=set1"},
{"id":38,"name":"Alpha","address":"China","price":21,"availability":false,"image":"https://robohash.org/molestiaelaborumillo.jpg?size=50x50&set=set1"},
{"id":39,"name":"Gembucket","address":"France","price":7,"availability":false,"image":"https://robohash.org/consecteturautemimpedit.png?size=50x50&set=set1"},
{"id":40,"name":"Flowdesk","address":"China","price":45,"availability":true,"image":"https://robohash.org/ametmollitianulla.bmp?size=50x50&set=set1"},
{"id":41,"name":"Quo Lux","address":"United States","price":62,"availability":true,"image":"https://robohash.org/eosatvoluptatum.png?size=50x50&set=set1"},
{"id":42,"name":"Greenlam","address":"Mexico","price":68,"availability":false,"image":"https://robohash.org/totamnihilmagnam.png?size=50x50&set=set1"},
{"id":43,"name":"Sonsing","address":"Swaziland","price":22,"availability":false,"image":"https://robohash.org/magnirerumratione.bmp?size=50x50&set=set1"},
{"id":44,"name":"Fintone","address":"Philippines","price":76,"availability":false,"image":"https://robohash.org/velitvelut.jpg?size=50x50&set=set1"},
{"id":45,"name":"Otcom","address":"Philippines","price":29,"availability":true,"image":"https://robohash.org/etutet.jpg?size=50x50&set=set1"},
{"id":46,"name":"Flexidy","address":"Ukraine","price":66,"availability":true,"image":"https://robohash.org/etvoluptatesomnis.bmp?size=50x50&set=set1"},
{"id":47,"name":"Kanlam","address":"China","price":54,"availability":false,"image":"https://robohash.org/nonquiaminima.jpg?size=50x50&set=set1"},
{"id":48,"name":"Matsoft","address":"China","price":95,"availability":false,"image":"https://robohash.org/nondoloremqueasperiores.png?size=50x50&set=set1"},
{"id":49,"name":"Aerified","address":"Senegal","price":45,"availability":false,"image":"https://robohash.org/explicabodoloribusvero.jpg?size=50x50&set=set1"},
{"id":50,"name":"Hatity","address":"Vietnam","price":41,"availability":true,"image":"https://robohash.org/utcumquesimilique.bmp?size=50x50&set=set1"}]
});

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

最佳答案

这是解决方案，在你的页脚 css 位置是:Absolute

HTML:

<!DOCTYPE html>
<html>
<head>
<Title> 
Search Your City
</Title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <link rel="stylesheet" href="css/liststyle.css">
<script src="script/myscript.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">


 <div class="container" >
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />

 <link rel="stylesheet" href="css/main.css">


<form>

<div class="inner-form">
                 <div class="input-field second-wrap">
                <input id="search" type="text" placeholder="Enter Keywords?" />

                   </div>

     <div class="input-field third-wrap">

     <button class="btn-search" type="button">
      <svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
      </button>

      </div>

</div><!--inner form-->
</form>




<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <a href="home.html">Home</a>
       <a href="#help">Help</a>
      <a  id="myBtn"  href="#registrationpage">Sign Up</a>
      <a  id="myBtn1" href="#Loginpopup" >Login</a>
      <a href="#adminpage">Admin</a>
</div>


       <div class="topnav"  id="myTopnav">
        <a href="#hack"></a>
      <a href="home.html">Home</a>
       <a href="#help">Help</a>
      <a  id="myBtn"  href="#registrationpage">Sign Up</a>
      <a  id="myBtn1" href="#Loginpopup" >Login</a>
      <a href="#adminpage">Admin</a>
   <a href="javascript:void(0);" class="icon" onclick="openNav()">
    <i class="fa fa-bars"></i>
  </a>
    </div>



<div class="acontainer">
<div class="card"  ng-repeat="x in records" style="margin:0 12px 12px 0;">
  <img src={{x.image}} alt="hotel image " ALIGN="left"   >
  <h1 >{{x.name}}</h1>
  <p class="price">{{x.price}}</p>
  <p>{{x.address}}</p>
  <p style="text-align:center"><button>Add to Cart</button></p>
</div>

</div>

<footer>
      <p>Moji Web Deisgn, Copyright &copy; 2019</p>
    </footer>

</div>
</body>



</html>

CSS:

body, html {
  height: 100%;
  margin: 0;
}




/* Position the navbar container inside the image */
.container {
  position: absolute;
  float:left;
  margin: 20px;
 width: 100%;
 border-bottom: 0.5px solid #e6e6e6;
}

/* The navbar */
.topnav {
   float:right;
  overflow: hidden;
 // background-color: #333;

}

/* Navbar links */
.topnav a {
  float: left;
  color: #190808;
  text-align: center;
  padding: 24px 24px;
  text-decoration: none;
  font-size: 18px;
    right=42px;
    font-weight:1200px;
    border-bottom: 3px solid transparent;
}
a:last-of-type{



}
.h{



}


.topnav a:hover:not(:first-child) {

  border-bottom: 3px solid black;

}


.h input{
border:none;
focus:none;
}


.topnav .icon {
  display: none;
}

@media screen and (max-width: 1200px) {
   .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

.card{
position:relative;
top:50%;
width:100%;
}

}


@media screen and (max-width: 1200px) {
  .topnav.responsive {  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
 right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;    }



  .topnav.responsive a {
     padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  }
}

.responsive a:hover{
  color: #f1f1f1;
}

.topnav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}








fieldset {
padding: 0.35em 0.75em 0.625em;
}


fieldset {
margin: 0;
padding: 0;
-webkit-margin-start: 0;
 -webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
 border: 0;
}







* {
  box-sizing: border-box;
}

body {
  font: 16px Arial;  
}


.card {
  box-shadow: 0px 8px 8px 0px   rgba(0, 0, 0, 0.2);
  float: left;
  width: 24%;
  padding: 0 20px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: 0;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 150px;
  font-size: 18px;
}




.acontainer{
 position: absolute;
  top: 214px;
  left: 12%;
  right:12%;




}
.card button:hover {
  opacity: 0.7;
}
@media screen and (max-width: 992px) {


.card{
position:relative;
top:50%;
width:100%;
}


  }



@media screen and (max-height: 450px) {
  .responsive {padding-top: 15px;}
  .responsive a {font-size: 18px;}
}

footer{
width:100%;
bottom:0;
  padding:20px;
  margin-top:20px;
  color:#ffffff;
  background-color:black;
  text-align: center;
height:240px;
}

Js Fiddle link for preview

关于html - 我想将页脚设置到窗口底部，但它与我的其他 div 重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57568265/

上一篇：html - 通过将鼠标悬停在子元素上来影响父元素

下一篇：进行下拉选择时，JavaScript 代码无法显示图片

相关文章：

javascript - 单击时获取元素的 id ( php, jquery, ajax, javascript )

javascript - AngularJs如何将数据从父组件发送到子组件

javascript - 服务失败时如何解决状态

html - 下拉菜单只在每个按钮悬停时打开一个下拉框

html - 如何使用 CSS 使矩形图像显示为圆形

html - 为什么父 div 没有达到预期的高度

javascript - 添加一个类并删除当前类，以便 J Query 中的按钮可以重新用于不同的功能

css - 如何防止div位置为:relative to allocate extra space

javascript - 如何使用动态评估的 angularjs 类并将其附加到 div？

angularjs - ASP.NET MVC Razor View 与 AngularJS

©2024 IT工具网  联系我们