Я, наверное, слишком много контента для того, что я пытаюсь сделать. Я просто хочу, чтобы ограничения макета переносились на окна разных размеров. К сожалению, макет не переносится, и некоторые 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))