Как сделать HTML-теги адаптивными к настройкам размера макета? - PullRequest
0 голосов
/ 04 января 2019

Я, наверное, слишком много контента для того, что я пытаюсь сделать. Я просто хочу, чтобы ограничения макета переносились на окна разных размеров. К сожалению, макет не переносится, и некоторые HTML-теги обрезаются на небольших экранах. Как сделать макет единообразным для всех размеров экрана?

Для справки, макет страницы должен выглядеть следующим образом:

 ----------------------------------------
|  [div 1]                               |
|                                        |
|                                        |
|                ----------              |
|                |   svg  |              |
|                ----------              |
|                                        |
|  [button1]                  [button2]  | 
-----------------------------------------

SVG имеет границу и использует viewBox, чтобы позволить SVG соответствующим образом корректировать размеры. Однако это проблема CSS и HTML, так как другие мои элементы управления не реагируют.

Это, вероятно, очень тривиально, но я думаю, что viewBox может влиять на теги HTML.

Это мой HTML:

#radioToggle {
  position: fixed;
  margin-top: -20px;
  margin-bottom: 20px;
  background: white;
}

#buttonOneDiv {
  position: fixed;
  padding: 20px;
  bottom: 0;
}

#buttonTwoDiv {
  position: fixed;
  padding: 20px;
  bottom: 0;
  right: 0;
}

#container {}

#tree {
  text-align: center;
}

svg {
  border: solid 2px black;
  margin-top: 50px;
  margin-bottom: 100px;
}
<div id="radioToggle"></div>
<!-- this is div1 -->
<div id="container">
  <!-- container hosting the div that hosts the SVG-->
  <div id="tree"></div>
</div>
<div id="buttonOneDiv">
  <button type="button" class="btn btn-secondary">Back</button>
</div>
<div id="buttonTwoDiv">
  <button type="button" class="btn btn-secondary" id="collapse">Forward</button>
</div>

Для дополнительной информации вот мой SVG:

let svg = d3.select("#tree")
.append("svg")
.attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " 
+ (height + margin.top + margin.bottom))
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...