Is there a way that I can make css take into account how much space a svg takes up

Question

I have a svg and two divs and I am trying to make it so it the 2 divs and the svg take up the whole screen when you enter the site but with the svg is makes it bigger because the css is not accounting for the svg is there a way I can make css account for the space the svg takes up

I have tried to set the max height for the header-container

I have also tried to adjust the vh for the 2 divs but on a smaller or bigger screen they become different sizes and it does not work

* {
  margin: 0%;
  padding: 0%;
}
body {
  height: 100000px;
}
.header-container {
  width: 100%;
  background-color: #3C8DAD;
  max-height: 100vh;

}

.header-top {
  width: 100%;
  height: 50vh;
}
svg {
  vertical-align: top;
}
.header-bottom {
  width: 100%;
  height: 50vh;
  background-color: #F5A962;
}
.header-content {
  align-items: center;
  width: 45%;
  height: 300px;
  border: 2px red solid;
  position: absolute;
  left: 25%;
  top: 50%; 
}
.name {
  font-family: 'Titillium Web', sans-serif;
  font-size: 40px;
  color: white;
}
.job {
  font-family: 'Noto Serif', serif;
  font-size: 66px;
  font-weight: 800;
  color: white;
  margin-top: 3%;
  margin-left: 4%;
}

<div class="header-container">
  <div class="header-top">
      <div class="header-content">
          <div class="name">Andrew Saenger</div>
          <div class="job">Front-End Web Developer</div>
      </div>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#F5A962" fill-opacity="1" d="M0,160L48,160C96,160,192,160,288,138.7C384,117,480,75,576,85.3C672,96,768,160,864,160C960,160,1056,96,1152,80C1248,64,1344,96,1392,112L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  </svg>
  <div class="header-bottom"></div>
</div>

score 1 · Accepted Answer · answered Jul 31 '21 at 15:30

I move your svg image inside the header-top class and did some few changes to the css.

* {
  margin: 0%;
  padding: 0%;
}

body {
  height: 100vh; /* changed */
}

.header-container {
  width: 100%;
  display: flex; /* added */
  flex-direction: column; /* added */
  background-color: #3c8dad;
  /* max-height: 100vh; can remove */
}

.header-top {
  width: 100%;
  height: 50vh;
  position: relative; /* added */
}
svg {
  width: 100%; /* added */
  height: max-content; /* added */
  position: absolute; /* added */
  bottom: -30px; /* added */
  /* vertical-align: top; can remove */
}
.header-bottom {
  width: 100%;
  height: 50vh;
  background-color: #f5a962;
}
.header-content {
  /* align-items: center; can remove */
  /* width: 45%; can remove */
  height: max-content; /* changed */
  border: 2px red solid;
  padding: 1rem;
  position: absolute;
  left: 50%; /* changed */
  top: 100%; /* changed */
  transform: translate(-50%, -50%);
  z-index: 5;
}
.name {
  font-family: 'Titillium Web', sans-serif;
  font-size: clamp(1.5em, 5vw, 3em); /* changed */
  color: white;
}
.job {
  font-family: 'Noto Serif', serif;
  font-size: clamp(2em, 5vw, 4em); /* changed */
  font-weight: 800;
  color: white;
}

<div class="header-container">
  <div class="header-top">
    <div class="header-content">
      <div class="name">Andrew Saenger</div>
      <div class="job">Front-End Web Developer</div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path
            fill="#F5A962"
            fill-opacity="1"
            d="M0,160L48,160C96,160,192,160,288,138.7C384,117,480,75,576,85.3C672,96,768,160,864,160C960,160,1056,96,1152,80C1248,64,1344,96,1392,112L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          ></path>
        </svg>
  </div>
  <div class="header-bottom"></div>

David Callanan · Answer 2 · 2021-07-31T14:54:20.070

0

Flex would probably work here. Try set the container to flex.

.header-container {
  display: flex;
}

Then remove the height property from each child and instead allow it grow using flex: 1.

.header-top {
  flex: 1;
}

.header-bottom {
  flex: 1;
}

The SVG element can be left as-is. It will take up whatever space it normally would, and the other elements will resize to with within the container.

You might need to set height: 100vh on .header-container if max-height doesn't work.

edited Jul 31 '21 at 14:54

answered Jul 31 '21 at 14:45

David Callanan

5,601
7
63
105

I tried that and it takes up 100vh but then my .header-top and .header-bottom colors dont show – Jul 31 '21 at 15:15
Oh yes you have to rearrange the elements a little bit. – David Callanan Jul 31 '21 at 17:52

G-Cyrillus · Answer 3 · 2021-07-31T20:26:49.840

You could also look at grid and build your layout on a 3x3 grid from at the most 2 children (unless you include the SVG into the background).

example

* {
  margin: 0%;
  padding: 0%;
}

.header-container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: repeat(3, 1fr);
  background-image: linear-gradient(to bottom, #3c8dad 50%, #f5a962 50%)
  /* note : you can also use grid-area if that helps set children within the grid via grid-area */
}

svg {
  grid-column: 1 / -1;
  grid-row: 2;
}

.header-content {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: auto;
}

.name {
  font-family: "Titillium Web", sans-serif;
  font-size: 40px;
  /* calc() or clamp() can be used to set that value */
  color: white;
  line-height: clamp(1ch, 25vh, 150px);
}

.job {
  font-family: "Noto Serif", serif;
  font-size: 66px;
  /* calc() or clamp() can be used to set that value */
  font-weight: 800;
  color: white;
  margin-top: 3%;
  margin-left: 4%;
  min-width: 15ch;
  /* whatever suits you */
  line-height: clamp(1.6ch, 20vh, 100px);
}

.job:first-line {
  /* it avoids the first word to be split */
  word-spacing: 5em;
  /* calc() or clamp() can be used to set that value */
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&family=Titillium+Web&display=swap" rel="stylesheet">
<div class="header-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#F5A962" fill-opacity="1" d="M0,160L48,160C96,160,192,160,288,138.7C384,117,480,75,576,85.3C672,96,768,160,864,160C960,160,1056,96,1152,80C1248,64,1344,96,1392,112L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  </svg>
  <div class="header-content">
    <h1 class="name">Andrew Saenger</h1>
    <p class="job">Front-End Web Developer</p>
  </div>
</div>

Is there a way that I can make css take into account how much space a svg takes up

3 Answers3