我在HTML页面中创建了一个带有svg对象的图形，我希望它与屏幕具有相同的高度。我认为我可以通过将样式设置为高度来实现：100％不起作用。我在Chrome，IE11或者下来测试过它。
我在这个主题上阅读了很多，但找不到实际工作的方法，并给出了与屏幕高度相同的高度。
那么，如何使SVG对象与屏幕一样大呢？
这是一个jsfiddle，我将样式设置为100％高度 https://jsfiddle.net/gz3ywdcm/
这是我的HTML代码：
awk '/MODEL 1/,/ENDMDL/' test.pdb
怎么可以这样做？我错过了一些HTML或CSS样式或规则吗？我应该使用Javascript来确定屏幕高度并从客户端设置它吗？是否永远不会使用SVG对象，我应该使用其他东西来制作图表吗？
答案 0 :(得分：0)
尝试使用viewheight，vh将svg高度设置为屏幕高度和视宽，vw作为屏幕宽度。
<svg xmlns="http://www.w3.org/2000/svg" style="margin: 2%; border: 1px solid black; border-image: none; width: 90vw; height: 100vh;">
这是小提琴
答案 1 :(得分：0)
如果你可以在它周围放一个包装，你可以使用绝对定位来达到这个效果。我通常比vh / vw单位更喜欢它。
<div style="position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;">
<svg xmlns="http://www.w3.org/2000/svg" style="display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;">
<circle fill="#1da856" cx="0%" cy="100%" r="3" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="91.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="91.6667%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="87.5%" x2="21.4617%" y2="91.6667%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="21.4617%" y2="87.5%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="79.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="79.1667%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="70.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="70.8333%" x2="32.2506%" y2="79.1667%" /><circle fill="#1da856" cx="66.9374%" cy="66.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="66.6667%" x2="32.2506%" y2="70.8333%" /><circle fill="#1da856" cx="66.9374%" cy="62.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="62.5%" x2="66.9374%" y2="66.6667%" /><circle fill="#1da856" cx="66.9374%" cy="58.3333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="58.3333%" x2="66.9374%" y2="62.5%" /><circle fill="#1da856" cx="69.4896%" cy="54.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="54.1667%" x2="66.9374%" y2="58.3333%" /><circle fill="#1da856" cx="69.4896%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="50%" x2="69.4896%" y2="54.1667%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="69.4896%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><text fill="#1da856" x="94.66%" y="50%">alice</text><circle fill="#319d7b" cx="4.11833%" cy="95.8333%" r="3" /><circle fill="#319d7b" cx="4.17633%" cy="91.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="91.6667%" x2="4.11833%" y2="95.8333%" /><circle fill="#319d7b" cx="4.17633%" cy="87.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="87.5%" x2="4.17633%" y2="91.6667%" /><circle fill="#319d7b" cx="6.43852%" cy="83.3333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="83.3333%" x2="4.17633%" y2="87.5%" /><circle fill="#319d7b" cx="6.43852%" cy="79.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="79.1667%" x2="6.43852%" y2="83.3333%" /><circle fill="#319d7b" cx="6.43852%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="75%" x2="6.43852%" y2="79.1667%" /><circle fill="#319d7b" cx="9.39675%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="75%" x2="6.43852%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="54.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="54.1667%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="45.8333%" x2="40.3712%" y2="54.1667%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="40.3712%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="41.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="41.6667%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="37.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="37.5%" x2="85.5568%" y2="41.6667%" /><circle fill="#319d7b" cx="98.2019%" cy="29.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="29.1667%" x2="85.5568%" y2="37.5%" /><circle fill="#319d7b" cx="98.2019%" cy="25%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="25%" x2="98.2019%" y2="29.1667%" /><circle fill="#319d7b" cx="98.2019%" cy="20.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="20.8333%" x2="98.2019%" y2="25%" /><circle fill="#319d7b" cx="99.0139%" cy="16.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="16.6667%" x2="98.2019%" y2="20.8333%" /><circle fill="#319d7b" cx="99.0139%" cy="12.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="12.5%" x2="99.0139%" y2="16.6667%" /><circle fill="#319d7b" cx="99.0139%" cy="4.16667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="4.16667%" x2="99.0139%" y2="12.5%" /><circle fill="#319d7b" cx="99.0719%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0719%" y1="0%" x2="99.0139%" y2="4.16667%" /><circle fill="#319d7b" cx="100%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="100%" y1="0%" x2="99.0719%" y2="0%" /><text fill="#319d7b" x="100%" y="0%">bob</text><text fill="black" x="-2%" y="2%">24</text><text fill="black" x="-2%" y="100%">0</text><text fill="black" x="98%" y="112%">02-03-17</text><text fill="black" x="0%" y="112%">02-03-17</text>
</svg>
</div>