Footer is invisible

Question

phphp 14 Junior Poster in Training

7 Years Ago

Sir I have these codes

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Set DIV Height to 100% Using CSS</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            position: relative;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            overflow: hidden;
        }
        .header {
            background-color: blue;
            width: 100%;
            border: 1px solid brown;
            height: 100px;
            line-height: 100px;
            position: fixed;
        }
        .container {
            height: 100vh;
            background: #f0e68c;
            padding: 20px;
            overflow: scroll;
        } ![Untitled.png](/attachments/large/4/bd088ee3b1c1ceb7db6e02812614cfdb.png "align-center") 
        .content {
            background-color: silver;
            width: 100%;
            border: 1px solid green;
            min-height: 100%;
        } ![Untitled.png](/attachments/large/4/bd088ee3b1c1ceb7db6e02812614cfdb.png "align-center")  ![Untitled.png](/attachments/small/4/bd088ee3b1c1ceb7db6e02812614cfdb.png "align-left") 
        .footer {
            background-color: orange;
            width: 100%;
            border: 1px solid red;
            height: 100px;
            line-height: 100px;
            bottom: 0;
        }
    </style>
</head>

<body>

    <div class="footer">Header div</div>
    <div class="container">

        <div class="content">
            <span style="color:red">A</span>" Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">B</span> Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">C</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">D</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">D</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">E</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">F</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">G</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">H</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">I</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">J</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">K</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">L</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">M</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">O</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">P</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">Q</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">R</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">S</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">T</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">U</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">V</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">W</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">X</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">Y</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

            <span style="color:red">Z</span>Web Design Toy is a program designed to allow you to learn XHTML code. With this tool, you can view the real time effect of what you are typing in the browser that is to say you type in the left pane of the interface and see, in the right pane, the result that the browser will display Web Design Toy is a totally free program that weighs only 500KB. Since it is portable, it does not require any installation.

        </div>
    </div>

    <div class="footer">Footer div</div>
</body>

</html>

When I run page, it displayed like this

Footer is invisible.

When Page runs then header and footer must be displayed and content div must have a scroll to see complete data from A to Z.

Please help

html-css

Edited 7 Years Ago by phphp

3 Contributors
3 Replies
245 Views
3 Hours Discussion Span
Latest Post 7 Years Ago Latest Post by diafol

gentlemedia 803 Master Poster

7 Years Ago

@diafol - he will get then 2 scrollbars.

OP - I asume you want a header at the top and a footer at the bottom and the space inbetween is for the content which gets a scrollbar when it overflows.
The reason why your footer is invisble (off-screen) is because you set a heaight on the container of 100vh which pushes the footer down off-screen (or below the fold) and because you have overflow hidden on the html and body it's invisble.

An easy fix for this would be to set a height with calc on that container:
height: calc(100vh - 200px );
That 200px is the height of the header and the footer together.
Little demo 1: http://codepen.io/gentlemedia/pen/EWYvVz

There's also a way to do this without calc so that you have better browser support (old IE), but it uses fixed positioned header and footer which might give you issues on older touch screen devices. Fixed positioned elements gave disastrous scrolling behaviors on them :)
Little demo 2: http://codepen.io/gentlemedia/pen/evORoL

Edited 7 Years Ago by gentlemedia

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

diafol · Answer 1 · 2017-02-22T13:13:30+00:00

Take:

overflow: hidden;

off the html/body rules.

diafol · Answer 2 · 2017-02-22T15:29:33+00:00

@diafol - he will get then 2 scrollbars.

I know, but you can see the footer :)