Skip to main content
P
petus14
Participant
February 9, 2017
Answered

Different page lengths with the template

  • February 9, 2017
  • 3 replies
  • 253 views

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

This topic has been closed for replies.
Correct answer Niharika Jha

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

3 replies

Niharika Jha
Adobe Employee
Niharika JhaCorrect answer
Adobe Employee
February 9, 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

O
osgood_
Legend
February 9, 2017

Is this the kind of structure you are looking for?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<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>

<div class="page_content">

<h1>Contents</h1>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</div>

<!-- end page_content -->

<footer>

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

</footer>

<!-- end footer -->

</body>

</html>

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
February 9, 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!
Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices