Высота содержимого окна реагирования - PullRequest
Новая
       0

Высота содержимого окна реагирования

0 голосов
/ 03 февраля 2020

Проблема

У меня проблема с получением высоты окна адаптивного контента для заполнения экрана по вертикали. все, включая ширину, корректно подстраивается под изменение размера в Dev Tools, однако, когда я настраиваю высоту поля содержимого в коде CSS, я могу ввести только высоту stati c в пикселях (483 в коде ниже). Когда я пытаюсь установить высоту 100%, моя карта Google, которая находится в окне контента, исчезает. Размер карты отлично меняется, так как я вручную настраиваю поле содержимого contenta высоту, чтобы оно работало нормально. У меня есть метатег как <meta content="width=device-width, height=device-height, initial-scale=1.0" charset="utf-8">

Поиск других вопросов не дал никаких решений.

Вопрос

Есть ли код, который мне не хватает, который позволяет заполнять поле адаптивного контента по вертикали?

рабочая тестовая страница

CSS 

 body {
  font-family: Arial, Helvetica, sans-serif;
  width: 99%;
  height:100%;
  background-color: #52669c;
}

#map {
  width:100%;
  height:100%;
  border-radius: 15px;
}

#contenta {
  float: left;
  background: #0099ff;
  width: 95%;
  height: 483px;
}

#rightcolumn {
  background: #FFFFFF;
  width: 2%;
  float: left;
}

1 Ответ

1 голос
/ 03 февраля 2020

Используйте этот шаблон в вашем html для полной ширины и полной высоты 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://saltwx.com/css/responsive.css">
  <title>My website</title>
  <!--
  rest of your <head>
  -->
</head>
<body>
<div class="page-wrapper">
  <!--
  rest of your <body>
  -->
</div>
</body>
</html>

с этим css

html, body, .page-wrapper {
  margin: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
...