How to remove white space below footer?

Submitted 3 years, 6 months ago

Ticket #220

Views 1100

Language/Framework CSS

Priority Low

Status Closed

Is there a way to push the footer to the bottom of the page? I don't want to make the footer sticky though.
Any help is appreciated, thanks!

Submitted on Oct 07, 20

Jaanvi

ok - Star 3 years, 6 months ago

add a comment

3 Answers

<body>
    <section>
        This is content of the page
    </section>
    <footer>
        Text of footer
    </footer>
</body>

Submitted 3 years, 6 months ago

Star

I am not sure that I understand exactly what you would like...

I am thinking about:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { padding: 3px; margin: 10px; border: 1px dotted lightgray; }
        footer, header { position: fixed; padding: 5px; }
        footer { bottom: 0; background-color: lightgrey; }
        header { top:0;     background-color: lightyellow; }
        section { margin-top: 10px; }
    </style>
</head>
<body>
    
    <section>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </section>
                  
<footer>Footer with copyright (for example)</footer>

<header>Header with menu (for example)</header>
  
</body>
</html>

Submitted 3 years, 6 months ago

kijato

Thanks for responding! I don't want the footer to be neither sticky nor fixed.

- Jaanvi

3 years, 6 months ago

How do you mean "bottom of the page"...? What is the object to which you want to attach the footer?

- kijato 3 years, 6 months ago

@Cheethirala.Jahnavi , Can you confirm the status of this ticket?

- Vengat

3 years, 6 months ago

@kijato: I updated the question with image..kindly take a look at it.. If you observe the image..the footer is placed immediately after the body content..i don't want like that..i want the footer to be pushed down to the page

- Jaanvi

3 years, 6 months ago

Verified

why you must not use the stick and fixed...?

I am thinking about the height property, somethiong like this:

<style>
body { height: 100%; background-color: pink;}
html { height: 100%; background-color: yellow;}
section { height: 100%; background-color: lightgreen; margin: 20px;}
</style>

Submitted 3 years, 6 months ago

kijato

Thanks, got it!

- Jaanvi

3 years, 6 months ago

Thanks kijato for supporting our community to provide valuable answer.

- Vengat

3 years, 6 months ago