1
divコンテナの境界線で行を実行しようとしていて、やや混乱しています。可変高さのコンテナの底にSVG線を固定する方法は？
私は縁に沿ってdiv要素を配置した場合は、私が使用します。
<div style="position: absolute; bottom: 0px;">hello world</div>
しかし、私は仕事に行くことができる唯一のSVGコードが間違っているようだ：
#BorderContainer805 {
\t position: absolute;
\t top: 0px;
\t left: 0px;
\t width: 99%;
\t height: 150px;
\t display: inline-block;
\t border-radius: 0;
\t border-width: 1px;
\t border-color: #696969;
\t border-style: solid;
}
#HorizontalLine1118 {
\t position: absolute;
\t stroke: rgba(154,154,154,1);
\t shape-rendering: crispEdges;
}
#HGroup811 {
\t position: absolute;
\t top: 43px;
\t right: 20px;
\t min-width: 20px;
\t min-height: 20px;
\t overflow: visible;
\t text-align: left;
\t font-family: Arial;
\t font-size: 12px;
}
#Hyperlink812 {
\t position: relative;
\t display: inline-block;
\t vertical-align: middle;
\t margin-top: -0.2em;
}
#Image817 {
\t position: absolute;
\t display: table;
\t top: 50%;
\t transform: translateY(-50%);
\t -webkit-transform: translateY(-50%);
\t -ms-transform: translateY(-50%);
\t left: 15px;
}<div id="BorderContainer805">
\t <svg style="position: absolute; width: 100%; height: 100%;"><line id="HorizontalLine1118" x1="0" x2="100%" y1="100" y2="100"></line></svg>
\t <img id="Image817" height="60" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4">
\t <div id="HGroup811">
\t \t <a id="Hyperlink812">Home</a>
\t \t <a id="Hyperlink813">Services</a>
\t \t <a id="Hyperlink814">Products</a>
\t \t <a id="Hyperlink815">About Us</a>
\t \t <a id="Hyperlink816">Contact Us</a>
\t \t <span style='display: inline-block; height: 100%; width: 0; vertical-align: middle;'></span>
\t </div>
</div >ありがとうございます！
を使用し、代わりに
<svg>要素に"height: 100%"の。 divの 'border-bottom' CSSがより効率的になりませんか？ –単純なケースでは、ボーダーボトムを使用しますが、私はdivにラインを追加できるツールに取り組んでいます。また、国境によっては解決できない場合もあります。たとえば、幅が100、さまざまな高さの下に5行（縦棒グラフ）が必要だったとします。 –
コードが間違っているように見えるのはなぜですか？私が知る限り、それは働くようです。 –