![]() Step 3: Add the flex-shrink-0 class to the tag containing your main content. We set some flexbox rules on the body that ensure that blocks are stacked vertically inside it. This makes the body’s height to be equal to its parent’s height (in this case, the height of the html tag, which is equal to the height of the viewport). h-100 adds height: 100%, d-flex adds display: flex and flex-column adds flex-direction: column to the body. Step 2: Add the classes h-100, d-flex and flex-column to the body tag. This gives the element a height of 100%, which will make the height of the page to be equal to the height of the viewport. Step 1: Add the h-100 class to the html tag. To make the footer sticky, follow the following 5 steps: Let’s see how to make your Startup template’s footer sticky. However, this footer will be pushed down if there is enough content to at least fill the viewport, so it is different from a fixed footer, which remains at the bottom of the browser window even if the page scrolls.īelow, you can see how a sticky footer (navy blue) will behave on a page with little content (light green) that doesn’t fill the height of the browser window, and with a lot of content that more than fills the height of the browser window: Let’s improve the page’s look by adding a Sticky Footer to it.Ī sticky footer is a footer that stays on the bottom of the browser window regardless of how little content is on the page. Our footer also ends up not being at the foot of the browser window. Since the content of the page isn’t enough to fill the height of the viewport, we get that whitespace where the content of the page ends. At the top of the page is the main content, followed by a footer and then some blank white space. If there isn’t much content on the page, you might end up with a page that looks like the above. Other than the main content of the website, you might also want to include a footer that holds other content, like important links, as shown above. Maybe it has a sentence or two announcing the launch of your product and an email input field to collect the email addresses of those interested, or maybe it contains a short intro to your product and a single call-to-action button, as shown below. You might use the Startup app to generate a simple landing page containing little content.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |