我如何为我的页面提供一个div，不仅可以显示背景图片，而且可以填充页面的其余部分？

Question

我想让我的最后一个div有一个图片作为背景，并填满页面上的剩余空间，但我看不到图片，所以我不能100%确定它是否填满了页面。我没有看到图像，所以我不能100%确定它是否填满了页面。有人看到我的错误了吗？

css

#uploader 
    min-height: 100%;
    height: auto;
    height: 100%;           
    background-image: url('hiki.jpg');

html

        <label for="icon"><b>Upload Your Own!</b></label>
        <input type="file" accept="image/*" id="uploadSelector" name="icon">
        <button type="submit" onclick="uploadPhoto()">Submit File</button>
      </div>

完整的html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Tracks App</title>
  <!-- jquery js -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <!-- Custom js -->
  <script type="text/javascript" src="./index.js"></script>
  <!-- jquery mobile js -->
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <!-- Sytlesheets -->
  <link rel="stylesheet" type="text/css" href="./index.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>  
  <div data-role="page" id="body-1">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div data-role="header" id="mapNinfo">
      <div id="googleMap">
        <script
          src="https://maps.googleapis.com/maps/api/js?key=Redactedcallback=myMap">
        </script>
      </div>
      <div id="showInfo">
        <img id="customerIMG">
        <p id="customerINFO"></p>
      </div>
      <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
      <![endif]-->
      <!--<ul id="list-1"></ul>  -->
    </div>

    <div data-role="main" id="tableNstuff">
      <div id="newCustomer">
        <a href="#" class="addCustomer" onclick="addCustomer()">Add Location</a>

        <div id="popUp" style="background-color: #ffff99; display: none">
          <label for="cName">Enter Customer Name :</label><input type="text" id="cName" name="cName"><br>
          <label for="cAddress">Enter Address :</label><input type="text" id="cAddress" name="cAddress"><br>
          <label for="cCSZ">Enter City, State Zip :</label><input type="text" id="cCSZ" name="cCSZ"><br>
          <label for="cAddress">Enter Lat:Lang :</label><input type="text" id="cLatLang" name="cLatLang"><br>
          <button class="ui-shadow ui-btn ui-corner-all" onclick="submitCustomer()">Submit</button>
        </div>
      </div>
      <a href="#" class="Add Current Location" onclick="distanceAppend()">Add Current Location</a>

      <div id="uploader">
        <label for="icon"><b>Upload Your Own!</b></label>
        <input type="file" accept="image/*" id="uploadSelector" name="icon">
        <button type="submit" onclick="uploadPhoto()">Submit File</button>
      </div>

    </div>
</div>
</body>
</html>

非常感谢您。

Answer 1

另一答案