How do I center a div without hiding the footer on an ASP.NET Razor Page?-CodePudding

I'm using min-vh-100 to extend the height of the div, but it hides the footer. hidden footer

CodePudding user response：

One way is to use the absolute positioning method and set the top and left properties of the div to 50%. Then, use the transform property to translate the div by -50% in both the x and y axis. This will center the div horizontally and vertically on the page.

.center-div {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

Another way is to use the flexbox layout method, add a parent div with a class name and set the display property to flex and set the align-items and justify-content properties to center.

.parent-div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - footerHeight);
}

You can set the min-height property to a value that is equal to the viewport height minus the height of the footer.

Also, you can fix the footer to the bottom of the page by giving it a fixed position, and then you can use the above methods for centering the div.

footer {
 position: fixed;
 bottom: 0;
 width: 100%;
}

It's important to note that your css should be defined after the razor page's css, otherwise the razor page's css could take precedence and hide the footer.

You can also use Bootstrap 4 classes to center the div and fix the footer to the bottom of the page.

<div >
<!-- your div here -->
</div>
<footer >
<!-- your footer here -->
</footer>

It's also important to test it on different screen sizes and devices to make sure that the footer is not hidden on any of them.