0

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

Untitled.png

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

Edited by phphp

3
Contributors
3
Replies
33
Views
5 Months
Discussion Span
Last Post by diafol
1

@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 by gentlemedia

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.