Как я могу предоставить моей странице div, который не только отображает фоновое изображение, но и заполняет остальную часть страницы? - PullRequest
0 голосов
/ 02 мая 2020

Я хочу, чтобы мой последний div имел изображение для фона и заполнял оставшееся место на странице. Я не вижу изображение, поэтому я не уверен на 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>

full 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>

Спасибо вам очень нравится.

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Существует 2 простых решения:

  1. Используйте calc из CSS3, добавив height: calc(100vh - 100px);. 100px здесь - высота верхнего содержимого над div.

  2. Лучшее решение - использовать flexbox. См. Простую демонстрацию https://jsfiddle.net/hhuy424/7a3qm49e/11/

html

<body>
  <div>header</div>
  <div class="content"></div>
</body>

css

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  background-color: #880000;
}
0 голосов
/ 02 мая 2020

попробуйте указать полный путь. Не уверен на 100%, что это сработает, но это начало.
#uploader{min-height: 100% ;height: auto; width: 100%(add this too); height: 100%; background-image: url('C:\example\hiki.jpg OR https://example.com/hiki.jpg')}​
Возможно, это не совсем исправит, но это начало. Если это не сработает, вы можете добавить еще JavaScript, который сохранит размеры изображения как переменную, а затем подключит его к CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...