I'm having trouble getting the footer to stay at the bottom of my website

Struggling with positioning my footer at the bottom of my website, I've tried various solutions posted by others but they don't seem to work for me.

I've experimented with different methods like using 'Bottom: 0;' or placing my footer in a div and using 'position: relative;' instead of 'absolute.' It's frustrating that nothing seems to be working. My coding skills are still basic, so please bear with me for now.

html {
     position: relative;
     min-height: 100%;
}
 body {
     background-color: rgb(43, 43, 43);
     margin: 0;
     min-height: 100%;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr auto;
     font-family: "Signika Negative", sans-serif;
}
/*-------HotBar-----*/
 .hotbar {
     position: fixed;
     top: 0;
     left: 0;
     height: 50px;
     width: 100%;
     border: 0px solid #000;
     background-color: rgb(32, 32, 32);
     display: grid;
     grid-template-columns: 50px repeat(4, 1fr);
     grid-column-gap: 15px;
    /* align-content: center;
     */
     z-index: 3;
}
 .hotbar a {
     top: 0;
     width: 1fr;
     margin-right: 20px;
     border: none;
     border-radius: 10px;
     background-color: rgb(32, 32, 32);
     color: rgb(255, 253, 253);
     display: grid;
     font-size: unset;
     height: 50px;
     text-decoration: none;
     align-content: center;
     justify-content: center;
}
 .hotbar img {
     height: 46px;
     margin-left: 20px;
     margin-top: 2px;
}
 @media screen and (max-width: 500px) {
     body {
         margin-top: 180px;
    }
     .hotbar {
         padding-bottom: 200px;
         grid-template-columns: 1fr;
         grid-column-gap: 0;
         grid-row-gap: 0;
         margin-left: 10px;
    }
}
 .hotbar .hem {
     background-color: rgb(32, 32, 32);
}
 #a:hover, #b:hover, #c:hover, #d:hover {
     background-color: rgba(90, 90, 90, 0.274);
}
 .hotbar a img:hover {
     rotate: 450deg;
}
 .hotbar img {
     transition: rotate 4s;
}
/*--------/HotBar/---------*/
/* -------1.html-------- */
 h1 {
     display: grid;
     position: absolute;
     font-size: 45px;
     top: -105px;
     place-self: center;
     color: rgb(223, 223, 223);
     background-color: rgb(32, 32, 32);
     padding: 5px 40px 5px 40px;
     border-radius: 10px 10px 0px 0px;
}
 #adiv {
     display: grid;
     position: absolute;
     border: 1px solid rgb(131, 81, 81);
}
 .headimg {
     margin-top: 150px;
     display: grid;
     height: 300px;
     width: 85%;
     position: relative;
     z-index: 1;
     background-color: rgb(32, 32, 32);
     justify-self: center;
     background: url(../../Bilder/Galaxfront.png) no-repeat center center;
     background-size: cover;
     border: 10px solid rgb(32, 32, 32);
     border-left: 20px solid rgb(32, 32, 32);
     border-right: 20px solid rgb(32, 32, 32);
     border-radius: 10px;
}
 #adivtxt {
     display: flex;
     position: relative;
     place-self: center;
     margin-top: 20px;
     border: 10px solid rgb(32, 32, 32);
     border-left: 20px solid rgb(32, 32, 32);
     border-right: 20px solid rgb(32, 32, 32);
     border-radius: 10px;
     height: fit-content;
     width: 85%;
     background-color: rgb(32, 32, 32);
     grid-template-columns: repeat(2, 1fr);
}
 #firsttxt p {
}
/* ---------/1.html/--------- */
/* ---------Kontakt---------- */
 h2 {
     color: white;
}
 label {
     color: white;
}
 input[type="text"], select, textarea {
     color: white;
     background-color: rgb(43, 43, 43);
     width: 100%;
     padding: 12px;
     border: 1px solid rgb(255, 255, 255);
     border-radius: 4px;
     box-sizing: border-box;
     margin-top: 6px;
     margin-bottom: 16px;
     resize: vertical;
     font-family: unset;
}
 #showModal {
     background-color: rgb(83, 83, 83);
     border: 1px solid #fff;
     color: white;
     padding: 12px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-family: unset;
}
 #showModal:hover {
     background-color: rgb(53, 53, 53);
}
 #diap {
     color: white;
     font-family: unset;
}
 #modal {
     border: 1px solid #fff;
     background-color: rgb(43, 43, 43);
     border-radius: 5px;
     width: 50%;
     height: fit-content;
}
 #okbutton {
     display: grid;
     position: relative;
     background-color: rgb(83, 83, 83);
     border: 1px solid #fff;
     color: white;
     padding: 5px 50px;
     border-radius: 4px;
     cursor: pointer;
     text-decoration: none;
     font-family: unset;
     justify-self: center;
     justify-content: center;
}
 .kontakt {
     margin-top: 50px;
     border-radius: 5px;
     background-color: rgb(43, 43, 43);
     padding: 20px;
}
 input:focus {
     outline: none;
}
 textarea:focus {
     outline: none;
}
/* ---------/Kontakt/--------- */
/* ---------Footer---------- */
 body #footer {
     border: 1px solid rgb(207, 102, 102);
     position: absolute;
     bottom: 0;
}
 body footer {
     display: flex;
     flex-direction: row;
     background-color: rgb(32, 32, 32);
    /* border: 1px solid rgb(114, 66, 66);
     */
     width: 100%;
     height: 50px;
     align-content: center;
     padding: 5px 0px;
}
 footer a, p {
     text-decoration: none;
     align-self: center;
     margin: 20px;
     color: white;
}
 footer a:hover {
     color: rgb(116, 114, 114);
}
/* -------/Footer/------- */
    <!DOCTYPE html>
    <html lang="sv">
       <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Hem - Vi i Universum</title>
          <link rel="stylesheet" href="1.css" />
          <link
             href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300&display=swap"
             rel="stylesheet"
             />
       </head>
       <body id="abody">
          <!-- Alla -->
          <div class="hotbar">
             <div class="logo">
                <a class="hem" href="https://gb7v56.csb.app/Sidor/1/1.html">
                <img src="../../Bilder/Logo.png" alt=""
                   /></a>
             </div>
             <a id="a" href="https://gb7v56.csb.app/Sidor/1/2.html">Vår Galax</a>
             <a id="b" href="https://gb7v56.csb.app/Sidor/1/3.html">Vårt Solsystem</a>
             <a id="c" href="https://gb7v56.csb.app/Sidor/1/4.html">Vår Planet</a>
             <a id="d" href="https://gb7v56.csb.app/Sidor/1/5.html">Forskning</a>
          </div>
          <!-- Alla -->
          <!-- Ind -->
          <div id="adiv">
             <div class="headimg">
                <h1>Vi i Universum</h1>
             </div>
             <div id="adivtxt">
                <p>
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
                   voluptatem dolorum non exercitationem molestiae voluptas eius! Cum
                   expedita in repellat labore saepe, odit eos nihil rerum assumenda
                   dolorum praesentium tenetur quidem facilis dolorem recusandae
                   voluptates iure aliquid magnam quas suscipit eaque alias nisi? Magnam
                   officiis deserunt natus, quisquam quae accusantium.
                </p>
                <p>
                   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
                   explicabo porro est, corporis debitis possimus vero fugit minus,
                   quisquam consequatur eos molestias. Doloribus reiciendis culpa quam,
                   quod numquam itaque eos accusamus nam accusantium, quaerat, enim quos
                   deleniti sit voluptatibus voluptatem. Culpa aut porro ullam aliquid
                   fugiat nam corrupti!
                </p>
             </div>
          </div>
          <!-- Ind -->
          <!-- Footer -->
          <div id="footer">
             <footer>
                <p>© Linkvard & Co 2023</p>
                <a href="https://gb7v56.csb.app/Sidor/Footer/Kontakt.html">Contact</a>
                <a href="">About Us</a>
             </footer>
          </div>
       </body>
    </html>

htmlcss

Answer №1

If you want the footer to remain fixed at the bottom of the screen while scrolling, ensure that the "position" is set to "fixed" and the "z-index" is set to "1" so that the footer does not get covered by other elements. Or perhaps your query has a different intention?

To position the footer just below the content as mentioned in the comment, it's advisable to give both the footer and the "adiv" the property "position: relative." I have made this adjustment in the code.

 html {
     position: relative;
     min-height: 100%;
}
 body {
     background-color: rgb(43, 43, 43);
     margin: 0;
     min-height: 100%;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr auto;
     font-family: "Signika Negative", sans-serif;
}
/*-------HotBar-----*/
 .hotbar {
     position: fixed;
     top: 0;
     left: 0;
     height: 50px;
     width: 100%;
     border: 0px solid #000;
     background-color: rgb(32, 32, 32);
     display: grid;
     grid-template-columns: 50px repeat(4, 1fr);
     grid-column-gap: 15px;
    /* align-content: center;
     */
     z-index: 3;
}
 .hotbar a {
     top: 0;
     width: 1fr;
     margin-right: 20px;
     border: none;
     border-radius: 10px;
     background-color: rgb(32, 32, 32);
     color: rgb(255, 253, 253);
     display: grid;
     font-size: unset;
     height: 50px;
     text-decoration: none;
     align-content: center;
     justify-content: center;
}
 .hotbar img {
     height: 46px;
     margin-left: 20px;
     margin-top: 2px;
}
 @media screen and (max-width: 500px) {
     body {
         margin-top: 180px;
    }
     .hotbar {
         padding-bottom: 200px;
         grid-template-columns: 1fr;
         grid-column-gap: 0;
         grid-row-gap: 0;
         margin-left: 10px;
    }
}
 .hotbar .hem {
     background-color: rgb(32, 32, 32);
}
 #a:hover, #b:hover, #c:hover, #d:hover {
     background-color: rgba(90, 90, 90, 0.274);
}
 .hotbar a img:hover {
     rotate: 450deg;
}
 .hotbar img {
     transition: rotate 4s;
}
/*--------/HotBar/---------*/
/* -------1.html-------- */
 h1 {
     display: grid;
     position: absolute;
     font-size: 45px;
     top: -105px;
     place-self: center;
     color: rgb(223, 223, 223);
     background-color: rgb(32, 32, 32);
     padding: 5px 40px 5px 40px;
     border-radius: 10px 10px 0px 0px;
}
 #adiv {
     display: grid;
     position: relative;
     border: 1px solid rgb(131, 81, 81);
}
 .headimg {
     margin-top: 150px;
     display: grid;
     height: 300px;
     width: 85%;
     position: relative;
     z-index: 1;
     background-color: rgb(32, 32, 32);
     justify-self: center;
     background: url(../../Bilder/Galaxfront.png) no-repeat center center;
     background-size: cover;
     border: 10px solid rgb(32, 32, 32);
     border-left: 20px solid rgb(32, 32, 32);
     border-right: 20px solid rgb(32, 32, 32);
     border-radius: 10px;
}
 #adivtxt {
     display: flex;
     position: relative;
     place-self: center;
     margin-top: 20px;
     border: 10px solid rgb(32, 32, 32);
     border-left: 20px solid rgb(32, 32, 32);
     border-right: 20px solid rgb(32, 32, 32);
     border-radius: 10px;
     height: fit-content;
     width: 85%;
     background-color: rgb(32, 32, 32);
     grid-template-columns: repeat(2, 1fr);
}
 #firsttxt p {
}
/* ---------/1.html/--------- */
/* ---------Kontakt---------- */
 h2 {
     color: white;
}
 label {
     color: white;
}
 input[type="text"], select, textarea {
     color: white;
     background-color: rgb(43, 43, 43);
     width: 100%;
     padding: 12px;
     border: 1px solid rgb(255, 255, 255);
     border-radius: 4px;
     box-sizing: border-box;
     margin-top: 6px;
     margin-bottom: 16px;
     resize: vertical;
     font-family: unset;
}
 #showModal {
     background-color: rgb(83, 83, 83);
     border: 1px solid #fff;
     color: white;
     padding: 12px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-family: unset;
}
 #showModal:hover {
     background-color: rgb(53, 53, 53);
}
 #diap {
     color: white;
     font-family: unset;
}
 #modal {
     border: 1px solid #fff;
     background-color: rgb(43, 43, 43);
     border-radius: 5px;
     width: 50%;
     height: fit-content;
}
 #okbutton {
     display: grid;
     position: relative;
     background-color: rgb(83, 83, 83);
     border: 1px solid #fff;
     color: white;
     padding: 5px 50px;
     border-radius: 4px;
     cursor: pointer;
     text-decoration: none;
     font-family: unset;
     justify-self: center;
     justify-content: center;
}
 .kontakt {
     margin-top: 50px;
     border-radius: 5px;
     background-color: rgb(43, 43, 43);
     padding: 20px;
}
 input:focus {
     outline: none;
}
 textarea:focus {
     outline: none;
}
/* ---------/Kontakt/--------- */
/* ---------Footer---------- */
 body #footer {
     border: 1px solid rgb(207, 102, 102);
     margin-top: 20px;
     position: relative;
}
 body footer {
     display: flex;
     flex-direction: row;
     background-color: rgb(32, 32, 32);
    /* border: 1px solid rgb(114, 66, 66);
     */
     width: 100%;
     height: 50px;
     align-content: center;
     padding: 5px 0px;
}
 footer a, p {
     text-decoration: none;
     align-self: center;
     margin: 20px;
     color: white;
}
 footer a:hover {
     color: rgb(116, 114, 114);
}
/* -------/Footer/------- */
<!DOCTYPE html>
<html lang="sv">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width,
initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>Hem - Vi i Universum</title>
      <link rel="stylesheet" href="1.css" />
      <link
href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300&display=swap"
rel="stylesheet"
         />
   </head>
   <body id="abody">
      <!-- Alla -->
      <div class="hotbar">
         <div class="logo">
            <a class="hem" href="https://gb7v56.csb.app/Sidor/1/1.html">
            <img src="../../Bilder/Logo.png" alt=""
               /></a>
         </div>
         <a id="a" href="https://gb7v56.csb.app/Sidor/1/2.html">Vår Galax</a>
         <a id="b" href="https://gb7v56.csb.app/Sidor/1/3.html">Vårt Solsystem</a>
         <a id="c" href="https://gb7v56.csb.app/Sidor/1/4.html">Vår Planet</a>
         <a id="d" href="https://gb7v56.csb.app/Sidor/1/5.html">Forskning</a>
      </div>
      <!-- Alla -->
      <!-- Ind -->
      <div id="adiv">
         <div class="headimg">
            <h1>Vi i Universum</h1>
         </div>
         <div id="adivtxt">
            <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
voluptatem dolorum non exercitationem molestiae voluptas eius! Cum expedita in
repellat labore saepe, odit eos nihil rerum assumenda dolorem recusandae
voluptates iure aliquid magnam quas suscipit eaque alias nisi? Magnam officiis
deserunt natus, quisquam quae accusantium.
            </p>
            <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa explicabo porro est, corporis debitis possimus vero fugit minus,
quisquam consequatur eos molestias. Doloribus reiciendis culpa quam, quod numquam
itaque eos accusamus nam accusantium, quaerat, enim quos deleniti sit
voluptatibus voluptatem. Culpa aut porro ullam aliquid fugiat nam corrupti!
            </p>
         </div>
      </div>
      <!-- Ind -->
      <!-- Footer -->
      <div id="footer">
         <footer>
            <p>© Linkvard & Co 2023</p>
            <a href="https://gb7v56.csb.app/Sidor/Footer/Kontakt.html">Kontakt</a>
            <a href="">Om Oss</a>
         </footer>
      </div>
   </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The themes showcased in the Bespoke.js documentation and demo exhibit unique designs

Recently, I stumbled upon an incredible HTML5 framework for presentations. For more information, you can check out the documentation here. You can also view a demo of the framework by visiting this link. However, I was disappointed to find that the caro ...

javascripthtmlpresentationbespoke.js

Develop a custom script function for every instance of a @foreach loop

I have a challenge where I need to style automatically generated table rows by clicking on a button. Currently, my code appears as follows: @foreach($tours as $tour) <tr id="{{$tour->id}}"> <td> {{$tour->tournr}} &l ...

javascripthtmllaravel

What steps can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

javascriptcss

Can you explain the significance of these specific HTML attributes within the button tag?

While browsing the web, I stumbled upon this HTML snippet: <button class="button--standard" mat-button mat-flat-button [disabled]=true >Disabled State</button> The combination of attributes like mat-button mat-flat-button [disabled]=true is u ...

htmlangularattributesangular-material

Is there a way to have an image expand to fit the entire screen before scrolling to view another image?

I'm working on a website and I want to have an image that automatically adjusts to fit any screen size. Users should be able to scroll down to see more content or another image. A similar effect can be seen on this site: . Any suggestions would be rea ...

css

The Benefits of Semantic Class Names compared to Microdata

As I strive to use semantic class names, my exploration of microdata and SEO raises a question: Is it necessary to use both? Compare these two HTML snippets representing an event: Using CSS classes: <div class="event" itemscope itemtype="http://schema ...

javascriptcsshtmlsemantic-markup

The iframe does not completely fill the col-sm column

https://i.sstatic.net/VeqFj.jpgHaving an issue styling embedded Grafana panels on my website. How can I adjust the iframes to fit within col-sm without large margins (refer to attached screenshot) This is my html: <p class= ...

htmlbootstrap-5

Please refrain from refreshing the page multiple times in order to receive updated data from the database

Currently, I have created a countdown timer from 00:60 to 00:00. However, once the timer reaches 00:00, I am looking to refresh the page only once in order to retrieve a new value from the database. Does anyone have any suggestions on how to achieve this ...

javascriptphpjqueryhtml

Converting a string to a date type within a dynamically generated mat-table

I am working on a mat-table that shows columns for Date, Before Time Period, and After Time Period. Here is the HTML code for it: <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay" > ...

javascripthtmlangulartypescript

I am interested in using a loop in Angular to highlight my div element

Enhancing my comprehension regarding the mentioned images. If I don't select anything within the div property, the default style (css) should appear like this, at least when one div is selected. However, the issue arises when unable to select. This ...

javascripthtmlcssangulartypescript

Tips for verifying that input is provided in a text field when the checkbox is marked

Can someone help me with validating a form where the user must enter data in a text field if they check a checkbox? I have JavaScript code for checkbox validation, but need assistance with text field validation. Thank you! $(document).ready(function () ...

javascriptjqueryhtml

Determining the precise location of the div element

I am seeking to determine the precise positions of a div based on its class name. In the screenshot provided, my script for finding the div's position is highlighted in yellow, while the div I am targeting is highlighted in red at the bottom. Currentl ...

javascriptjqueryhtmlcsscss-position

Is it possible to connect ng-model with a style tag?

Is it feasible to create a basic template editor using angularjs where an input field with an ng-model can be connected to a style tag to control the css on an entire page rather than applying it to a specific element with inline styling? Could something ...

javascripthtmlcssangularjs

The fundamental principle of starting with mobile design in Bootstrap

I'm struggling to understand the concept of "mobile first default behavior" in Bootstrap 3. If there is no breakpoint at 480px, how can Extra small devices be the default? I get that it applies to font sizes, but what about the grid system? How can I ...

csstwitter-bootstrap

Sending numerous HTML forms using a sole submit button through AJAX

On my website, I have a page named publish.php where users can input details for each image they upload. Each image has its own form, but only one form is displayed at a time in a tabbed layout when the user clicks on the corresponding thumbnail. I want to ...

javascripthtmlajaxformspost

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

javascripthtmlcss

Using only python, launch a local html file on localhost

Currently, I am executing a code on a remote server that periodically creates an "status" HTML file (similar to TensorBoard) and saves it in a directory on the server. To check the status, I download this HTML file whenever needed. However, if I could use ...

pythonhtmlserverxampplocalhost

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

javascriptcssangulartypescript

What is causing Firefox to display an additional line in this section?

After much effort, I've been attempting to eliminate the extra spacing on this page in Firefox: Do you see the menu? If you compare it to Chrome, you'll notice that the menu is positioned too low beneath the background, giving the layout a broke ...

htmlcsshtml-lists

Ensure that clicking on various links will result in them opening in a new pop-up window consistently

I am facing an issue with my HTML page where I have Four Links that are supposed to open in separate new windows, each displaying unique content. For instance: Link1 should open in Window 1, Link2 in Window 2, and so on... The problem I'm encounter ...

javascripthtmlbrowser