Question

我无法将页脚固定在屏幕上。意思是当查看页面时，我希望一直看到页脚。我已经尝试过位置（固定，绝对），但无法解决。我已经在网上搜索过，但仍然很难停留在屏幕底部，在此先感谢您的帮助

尝试：position: fixed和position: absolute

.bo-wrap {
  clear: both;
  width: auto;
}

.bo-footer {
  clear: both;
  width: auto;
  padding: 5px;
  margin: 0 auto;
  width: 960px;
  height: 25px;
}

.bo-footer-social {
  text-align: center;
  line-height: 1px;
}

.bo-footer-smap {
  width: 300px;
  float: left;
  padding: 5px 10px;
  text-align: left;
  font-size: 18px;
}

.bo-footer-uonline {
  width: 300px;
  /* Account for margins + border values */
  float: left;
  padding: 5px 10px;
  text-align: center;
}

.bo-footer-power {
  width: 300px;
  padding: 5px 10px;
  float: left;
  text-align: right;
  font-size: 14px;
  color: #636A7D;
  vertical-align: middle;
}

.bo-footer-copyright {
  text-align: center;
  color: #BDC3CF
}

<div class="bo-wrap clr4">
  <div class="bo-footer">
    <div class="bo-footer-social"></div>
  </div>
</div>
<div class="bo-wrap clr3">
  <div class="bo-footer">
    <div class="bo-footer-smap">
      <a href="http://www.bangalionline.com/sitemap.php">Sitemap</a> | <a href="http://www.bangalionline.com/terms.php">Policy</a> | <a href="http://www.bangalionline.com/contact.php">Contact Us</a>
    </div>
    <div class="bo-footer-uonline">
      <script id="_wautoy">
        var _wau = _wau || [];
        _wau.push(["small", "p6egqc1t5bze", "toy"]);
        (function() {
          var s = document.createElement("script");
          s.async = true;
          s.src = "http://widgets.amung.us/small.js";
          document.getElementsByTagName("head")[0].appendChild(s);
        })();
      </script>
    </div>
    <div class="bo-footer-power">
      Powered By JK - <a href="http://www.jobaerulkaes.com/">Web &amp Apps Developer</a>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
<div class="bo-wrap clr4">
  <div class="bo-footer">
    <div class="bo-footer-copyright">&copy;2019 Timeless Consignment All rights reserved.</div>
  </div>
</div>

Answer 1

我包裹了三个页脚div，class = wrapper，footer-wrapper

void firstChange() async {
    try {
    String barcodeRaw = await BarcodeScanner.scan();
    setState(() => barcode = barcodeRaw);

    WidgetsBinding.instance.addPostFrameCallback(secondChange); // bind Callback

    print(barcode); 
    } catch (e){
      print("error");
    }
  }
  void secondChange(Duration duration) async {
    try {
      String barcodeRaw = barcode;
      Response response = await http.get('https://www.datakick.org/api/items/' + barcodeRaw );
      setState(() => barcode = barcodeRaw);

      WidgetsBinding.instance.addPostFrameCallback(thirdChange); // bind Callback

    print(barcode); 
    } catch (e){
      print("error");
    }
  }

  void thirdChange(Duration duration) async {
    try {
      Map<String, dynamic> barcodeJson = jsonDecode(response.body);
      String barcodeNew = "${barcodeJson['brand_name']}";
      setState(() => barcode = barcodeNew); 
      print(barcode);
    } catch (e){
      print("error");
    }
  }

然后将包装器的位置设置为绝对位置，宽度为100％，底部设置为0：

   <div class="wrapper footer-wrapper">
    <div class="bo-wrap clr4">
      <div class="bo-footer">
        <div class="bo-footer-social"></div>
      </div>
    </div>
    <div class="bo-wrap clr3">
      <div class="bo-footer">
        <div class="bo-footer-smap">
          <a href="http://www.bangalionline.com/sitemap.php">Sitemap</a> | <a
            href="http://www.bangalionline.com/terms.php">Policy</a> | <a
            href="http://www.bangalionline.com/contact.php">Contact Us</a>
        </div>
        <div class="bo-footer-uonline">
          <script id="_wautoy">var _wau = _wau || []; _wau.push(["small", "p6egqc1t5bze", "toy"]);
            (function () {
              var s = document.createElement("script"); s.async = true;
              s.src = "http://widgets.amung.us/small.js";
              document.getElementsByTagName("head")[0].appendChild(s);
            })();</script>
        </div>
        <div class="bo-footer-power">
          Powered By JK - <a href="http://www.jobaerulkaes.com/">Web &amp Apps Developer</a>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="bo-wrap clr4">
      <div class="bo-footer">
        <div class="bo-footer-copyright">&copy;2019 Timeless Consignment All rights reserved.</div>
      </div>
    </div>
</div>

页脚位置固定在屏幕上

1 个答案: