0

I am trying to vertically center text inside a child div that is full height, but when I do that it has extra spacing at the bottom. How can I do this without the extra spacing? I'd like to have a nav along with some vertically centered text, but without the extra spacing.

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
}

.landing {
  background: url(bg.svg);
  height: 100vh;
}

.landing-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.landing-content h1 {
  color: white;
  margin: 0;
}

.app {
  background-color: black;
  height: 100vh;
  color: white;
}
<div class="app">
  
  <div class="logo">
     <h1>logo</h1>
  </div>
      
  <div class="landing">
    <div class="landing-content">
      <h1>hi, i'm jordan</h1>
    </div>
  </div>
  
</div>
user8098132
  • 19
  • 5

4 Answers4

0

The use of height: 100vh was not suitable, what it does is recognize the view-width as its height and that limit limits the height and recreate a small crack at the bottom. You can try using height: 100% instead

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
}

.landing {
  background: url(bg.svg);
  height: 100vh;
}

.landing-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.landing-content h1 {
  color: white;
  margin: 0;
}

.app {
  background-color: black;
  height: 100%;
  color: white;
}
<div class="app">
  
  <div class="logo">
     <h1>logo</h1>
  </div>
      
  <div class="landing">
    <div class="landing-content">
      <h1>hi, i'm jordan</h1>
    </div>
  </div>
  
</div>
Huy Phạm
  • 888
  • 9
  • 24
0

Remove landing class height and add landing-content class height to 100%. When you add landing class height to 100vh, It covers 100vh height. But logo class already covers some height. so it overflows.

.landing {
  background: url(bg.svg);
}

.landing-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

working fiddle - https://jsfiddle.net/alimurrazi/36svho08/1/

Alimur Razi Rana
  • 338
  • 3
  • 15
0

Since .app has the default display: block, .logo takes up however much space it needs, then .landing goes underneath, taking up an additional 100vh, so that you need to scroll to view its full content.

The solution here is either to simply add overflow-y: hidden to .app, but that still leaves your text off center by a bit. Another solution would be to give .app display: flex, and using flexbox to distribute the space as needed.

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
}

.landing {
  background: url(bg.svg);
  flex-grow: 1;
}

.landing-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.landing-content h1 {
  color: white;
  margin: 0;
}

.app {
  background-color: black;
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
}
<div class="app">
  
  <div class="logo">
     <h1>logo</h1>
  </div>
      
  <div class="landing">
    <div class="landing-content">
      <h1>hi, i'm jordan</h1>
    </div>
  </div>
  
</div>
futur
  • 1,673
  • 5
  • 20
0

Change the .app class as follow.

.app {
  background-color: black;
  height: auto;
  color: white;
}
Shan.M
  • 139
  • 3
  • 11