#HTML / CSS footer & body help

1 messages · Page 1 of 1 (latest)

proven musk
#

Hello

I have bought a PC last week and I decided to get into web development and make my own website. I decided to use Astro as I really like the idea of this framework and I see no issues with learning HTML + CSS while also learning Astro.

I have ran into a problem.

My footer isn't sticking to the bottom of the page and I don't understand why. I'm trying to understand why. so can someone help me understand why this is happening?

Thanks.

#

Layout.astro:


---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
const { title = "Main Site Name", description = "Site Desc" } = Astro.props;
---

<!DOCTYPE html>
<html lang={Astro.props.lang || "en"}>
    <head>

        <!-- Meta Tags -->
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content={description} />
        <meta name="generator" content="Astro" />

        <title>{"Main Site Name | " + title}</title>

        <!-- Styling -->
        <link rel="stylesheet" href="/css/global.css" />
        <link rel="icon" href="/favicon.ico" />

        <!-- Open Graph for social sharing -->
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content="/images/preview.png" />
        <meta property="og:url" content="URL here" />
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content={title} />
        <meta property="og:locale" content="en_US" />

        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={title} />
        <meta name="twitter:description" content={description} />
        <meta name="twitter:image" content="/images/preview.png" />
        <meta name="twitter:site" content="My Twitter Handle" />
    </head>
    <body>
        <div class="layout">
            <header>
                <Header />
            </header>

            <main>
                <slot />
            </main>

            <footer>
                <Footer />
            </footer>
        </div>
    </body>
</html>
#

Header.astro

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<style>
  nav {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #111;
    color: white;
  }
  a {
    color: white;
    text-decoration: none;
  }
</style>
#

Footer.astro:

<footer>
  <p>&copy; 2025 Name. All rights reserved.</p>
</footer>

<style>
  footer {
    text-align: center;
    padding: 2rem;
    background: #111;
    color: #ccc;
    font-size: 0.9rem;
  }
</style>
#

Global.css:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}
proven musk
prisma birch
#

Hi! Does your css/global.css file stored in your public directory? Or is it src/css/global.css? Because it looks like it isn't loaded.

A common pattern when you need a global CSS file is to import it in your layout instead:

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
+import "../css/global.css";
const { title = "Main Site Name", description = "Site Desc" } = Astro.props;
---

Then you can remove the following line in your head:

<link rel="stylesheet" href="/css/global.css" />
proven musk
#

It is stored in src/css/
I have deleted the project and decided to get a udemy course on web development

proven musk