Dev Faq
1
votes

Comment garder une ligne SVG à la même hauteur qu'un div parent, où la hauteur n'est pas spécifiée?

J'essaye donc de placer une ligne SVG entre deux colonnes, mais la ligne ne prend pas la hauteur du conteneur parent. Le conteneur parent n'a pas de hauteur spécifiée car je souhaite qu'il s'adapte automatiquement à la colonne la plus élevée.

Exemple: https://jsfiddle.net/Lye0z5wx/4/

Code

p > 

<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>
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%;
}

J'ai essayé plusieurs choses pour que cela fonctionne mais la ligne SVG continue de se réduire lors du redimensionnement du navigateur. Lorsque je veux qu'il contienne la hauteur totale du div parent.

Merci pour l'aide!

4 commentaires

Vous pouvez définir une bordure droite: 1px trait plein: rgb (235,235,235) sur la première colonne, vous n'avez même pas besoin d'un svg là-bas.

Je ne sais pas si je pourrais le centrer parfaitement de cette façon, comment feriez-vous cela?

Ligne centrée utilisant la bordure et le remplissage: https://jsfiddle.net/y53d0wL6/

C'est bien plus simple en effet! Aussi meilleure compatibilité du navigateur, je vais donc utiliser cette option.

3 Réponses :

0
votes

Il vous suffisait d'ajouter une hauteur à .container et à la .column violon ici 

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

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

0 commentaires
1
votes

Vous pouvez utiliser le hack padding:

Vous enveloppez votre svg sur un conteneur .svgDiv dans ce cas. Le .svgDiv a height: 0 et padding-top: 100% , ce qui le rend aussi haut que le conteneur. Ensuite, vous pouvez donner à votre svg la largeur et la hauteur du conteneur. 

<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>
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;
}

Une autre façon de le faire serait

  • Vous enveloppez votre svg sur un conteneur .svgDiv dans ce cas

  • vous changez align-items: center; en align-items: stretch; pour le conteneur

  • Pour garder le texte au centre, ajoutez align-self: center; pour les colonnes.

  • Ensuite, vous donnez à votre SVG la largeur et la hauteur du .svgDiv (100%) 

<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>
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;
}

J'espère que cela vous aidera.

0 commentaires
1
votes

Supprimez height: 100% de l'élément svg et ajoutez la propriété align-self comme stretch afin que le La flexbox elle-même l'étendra sur toute la hauteur de la flexbox - voir la démo ci-dessous et violon mis à jour : 

<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>
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 */
}

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor