如何在未指定高度的情况下保持 SVG 线与父 div 相同的高度？

【问题标题】：How to keep an SVG line the same height as a parent div, where the height is not specified?如何在未指定高度的情况下保持 SVG 线与父 div 相同的高度？
【发布时间】：2019-06-29 04:57:48
【问题描述】：

所以我试图在两列之间放置一条 SVG 线，但该线没有占用父容器的高度。父容器没有指定高度，因为我希望它自动缩放到最高列。

示例： https://jsfiddle.net/Lye0z5wx/4/

代码

html,
body {
  width: 100%;
  height: 100%;
}

div.container {
  margin: 40px auto;
  width: 70%;
  display: flex;
  align-items: center;
}

.column {
  display: inline-block;
  width: 40%;
}

svg {
  display: block;
  height: 100%;
  width: 20%;
}
<body>
  <div class="container">
    <div class="column">
      <h3>Content</h3>
      <p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
      <p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo
        quis fringilla.</p>
    </div>
    <svg viewbox="0 0 100 100" preserveAspectRatio="none">
      <line x1="50%" x2="50%" y1="0" y2="100%" style="stroke:rgb(235,235,235);stroke-width:1" />
      Sorry, your browser does not support inline SVG.
    </svg>
    <div class="column">
      <h3>Content</h3>
      <p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
      <p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo
        quis fringilla.</p>
    </div>
  </div>
</body>

我一直在尝试几种方法来完成这项工作，但 SVG 线在调整浏览器大小时会不断缩小。当我希望它包含父 div 的完整高度时。

感谢您的帮助！

【问题讨论】：

  • 你可以在第一列设置一个border-right:1px solid stroke:rgb(235,235,235)，所以你甚至不需要一个svg。
  • 不确定我是否能以这种方式完美地居中，你会怎么做？
  • 使用边框和填充的居中线：https://jsfiddle.net/y53d0wL6/
  • 这确实简单多了！还有更好的浏览器兼容性，所以我会使用这个选项。

标签： html css svg flexbox


【解决方案1】：

从svg 元素中删除height: 100% 并将align-self 属性添加为stretch，以便flexbox 本身将其拉伸到flexbox - 见下面的演示和updated fiddle:

html, body {
  width: 100%;
  height: 100%;
}
div.container {
  margin: 40px auto;
  width: 70%;
  display: flex;
  align-items: center;
}

.column {
  display: inline-block;
  width: 40%;

}

.column h3{
  color: #1c3653;
  font-size: 20px;
  margin: 0px;
}

.column p {
  color: #1c3653;
  font-size: 15px;
}

svg {
  display: block;
  /*height: 100%;*/
  width: 20%;
  align-self: stretch; /* ADDED */
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="container">
  <div class="column">
    <h3>Content</h3>
    <p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
    <p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis
      fringilla.</p>
  </div>
  <svg viewbox="0 0 100 100" preserveAspectRatio="none">
      <line x1="50%" x2="50%" y1="0" y2="100%" style="stroke:rgb(235,235,235);stroke-width:1" />
      Sorry, your browser does not support inline SVG.
    </svg>
  <div class="column">
    <h3>Content</h3>
    <p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
    <p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis
      fringilla.</p>
  </div>
</div>

【讨论】：

    【解决方案2】：

    你可以使用 padding hack：

    在这种情况下，您将 svg 包装在容器 .svgDiv 上。 .svgDiv 具有 height:0 和 padding-top:100% 使其与容器一样高。然后你可以给你的 svg 容器的宽度和高度。

    html, body {
  width: 100%;
  height: 100%;
}
div.container {
  margin: 40px auto;
  width: 70%;
  display: flex;
  align-items: center;
  outline:1px solid;
}

.column {
  display: inline-block;
  width: 40%;

}

.column h3{
  color: #1c3653;
  font-size: 20px;
  margin: 0px;
}

.column p {
  color: #1c3653;
  font-size: 15px;
}

svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.svgDiv{ 
   width: 10%;
   height:0;
   padding-top:100%;
   position: relative;
}
  
    <div class="container">
		<div class="column">
			<h3>Content</h3>
			<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
			<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
		</div>
    
    <div class="svgDiv">
    <svg viewbox="0 0 100 100" preserveAspectRatio="none">
 
      <line x1="50%" x2="50%" y1="0" y2="100%" style="stroke:rgb(0,0,0);stroke-width:1" />
    </svg>
    </div>
    
		<div class="column">
			<h3>Content</h3>
			<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
			<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
		</div>
  </div>

    另一种方法是

    • 在这种情况下，您将 svg 包装在容器 .svgDiv 上

    • 您将容器的align-items: center;更改为align-items: stretch;

    • 要使文本居中，请为列添加align-self:center;。

    • 接下来为 SVG 指定 .svgDiv 的宽度和高度 (100%)

    html, body {
  width: 100%;
  height: 100%;
}
div.container {
  margin: 40px auto;
  width: 70%;
  display: flex;
  align-items: stretch;
  outline:1px solid;
}

.column {
  display: inline-block;
  width: 40%;
  align-self:center;
}

.column h3{
  color: #1c3653;
  font-size: 20px;
  margin: 0px;
}

.column p {
  color: #1c3653;
  font-size: 15px;
}

svg {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}

.svgDiv{ 
width: 10%;
position:relative;
}
    <div class="container">
		<div class="column">
			<h3>Content</h3>
			<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
			<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
		</div>
    <div class="svgDiv">
    <svg viewbox="0 0 100 100" preserveAspectRatio="none">
 
      <line x1="50%" x2="50%" y1="0" y2="100%" style="stroke:rgb(0,0,0);stroke-width:1" />
    </svg>
     </div>
		<div class="column">
			<h3>Content</h3>
			<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
			<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
      <p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
			<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
		</div>
  </div>

    我希望这会有所帮助。

    【讨论】：

      【解决方案3】：

      您只需为.container 和.column fiddle here 添加一个高度

      div.container {
  margin: 40px auto;
  width: 70%;
  display: flex;
  align-items: center;
  height: 350px;
}

.column {
  display: inline-block;
  width: 40%;
  height: 100%;
}

      【讨论】：

        猜你喜欢
        • 2019-02-27
        • 2010-11-10
        • 1970-01-01
        • 2014-12-11
        • 2014-09-02
        • 1970-01-01
        • 2017-09-30
        • 1970-01-01
        • 2013-09-16
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode