Different page lengths with the template

Report · Feb 09, 2017

Hey guys,

I've got a huge problem with my template in dreamweaver. I know how to add a editable div but my problem is that every page content is different.

What i mean is that on one page (if you add the text) you have to scroll down very long but on the other page there isn't much content and you don't have to scroll.

Now i'm facing two problems:

The short pages are as long as the long pages which allows you to scroll down very long, although there is nothing.
I don't know how to add a footer which is always on the bottom (behind the last object).

I hope you can help me or send me a link to a tutorial or something like that. I did a lot of research and found nothing...

Thanks in advance,

Petus

Report · Feb 09, 2017

Have a look here Sticky Footer, Five Ways | CSS-Tricks

Edit:

Grid, the last example, is not supported at the moment. In other words, do not use.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 09, 2017

Is this the kind of structure you are looking for?

<!DOCTYPE html>

<html>

<head>

<title>Untitled Document</title>

<style>

body {

margin: 0;

}

footer {

position: fixed;

bottom: 0;

width: 100%;

background-color: #000;

}

footer h3 {

color: #fff;

}

</style>

</head>

<body>

<h1>Contents</h1>

<p>Text content goes here. Text content goes here</p>

</div>

<h3>Footer content goes here.</h3>

</footer>

</body>

</html>

Report · Feb 09, 2017

Hi,

For a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally. However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).

If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).

This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with position: absolute;.

The CSS footer style can be something as below-

.footer {

position: absolute;

right: 0;

bottom: 0;

left: 0;

padding: 1rem;

}

This way the footer will always be positioned at the bottom of the page, but not fixed!

Regards,

Niharika Gupta

Different page lengths with the template

1 Correct answer