Currently, the webpage I am developing using Bootstrap features a masthead navbar at the top. As it stands, without any padding added, the content overlaps with the navbar. The content of each page is loaded dynamically through ajax, leading to variability in terms of how much space it occupies on the page. On some occasions, the content may not fill up the whole page, leaving me desiring for it to stay centered both vertically and horizontally. However, when the dynamic content (such as a table) expands, it automatically takes up more space.
The issue arises when adding padding - while it prevents the content from overlaying the navbar when there's additional content loaded via ajax, it also disrupts vertical centering by pushing the content down by that amount of pixels. On the other hand, omitting padding causes overlap issues when the dynamically returned content increases.
Pondering the dilemma, what would be the most effective method to ascertain if there is overlap and subsequently apply the necessary padding?