footer "fixed" at the bottom of the page, but after the content

Question

footer "fixed" at the bottom of the page, but after the content

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I currently have the following code:

html, body, .content{
  height:100%;
}

nav {
  height: 15%;
  background-color: red;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
}

main {
  color: white;
  background-color: blue;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

However, if the content text is too large:

html, body, .content{
  height:100%;
}

nav {
  height: 15%;
  background-color: red;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
}

main {
  color: white;
  background-color: blue;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a mattis ante, ut rhoncus lorem. Sed pretium viverra elit, id sollicitudin lacus congue eu. Nam mattis velit at velit vulputate ornare vitae quis metus. Nam tortor elit, dictum id pellentesque id, efficitur sed nulla. Donec justo ipsum, porttitor eget odio a, laoreet dictum sapien. Pellentesque mi elit, facilisis ac suscipit vel, elementum non nisl. Aliquam sit amet felis a eros sagittis semper. Vestibulum maximus tristique diam, scelerisque posuere quam fermentum a. Quisque vitae dolor a sapien pretium luctus. Curabitur consectetur consequat diam id pellentesque. Donec non laoreet ipsum, ac pharetra ex. Etiam a tellus turpis. Aliquam at magna laoreet, consequat massa in, fringilla lorem.</p>
  
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

Is there any way I can centralize content without using position: absolute; top: 50%; transform: translateY(-50%); ?

E Is there any way to make the footer aligned in the footer of the page while the content is small and does not create a scroll bar and that it is below the content when it has a scroll bar?

html5 css3

asked by anonymous 30.07.2018 / 16:48

2 answers

0

Adds padding-bottom to the body that solves the problem of the big content, the question of centering the content by what I understand you need a padding in the elements too

30.07.2018 / 17:10

How do I run background applications using Docker? Creating a client-server architecture in C # [closed]

score 1 · Accepted Answer

You get something very close to what you want only with flexbox

I made two examples, this template has little content and footer is aligned in the database.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content{
  height:100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

footer {
  height: 50px;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
  -ms-flex-item-align: end;
  align-self: flex-end;
}

main {
  color: white;
  background-color: blue;
  width: 100%;
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%); */
}

<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

And in this example I put a lot of content in <main> and you can see that footer was at the end of content.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content{
  height:100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

footer {
  height: 50px;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
  -ms-flex-item-align: end;
  align-self: flex-end;
}

main {
  color: white;
  background-color: blue;
  width: 100%;
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%); */
}

<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam facere doloribus necessitatibus modi vitae, velit at commodi obcaecati reiciendis reprehenderit vel pariatur molestiae. Modi, ratione minus facere eveniet amet aliquam voluptate laborum debitis quos, quibusdam consequatur ab quo vel a iure adipisci culpa accusamus atque? A laudantium quod dolor, dolorem omnis molestias dignissimos in nulla vel ducimus quos impedit sunt temporibus corrupti suscipit sit iusto nemo adipisci nostrum magni eos, modi qui! Reiciendis, accusantium nam. Non nisi esse placeat id quae ducimus nihil quos doloremque aut dolore. Adipisci, earum explicabo fugit delectus obcaecati laborum, ab unde mollitia tenetur consectetur, cum impedit minus? Libero quasi quis voluptatem atque quibusdam odit magnam pariatur numquam consectetur ex, error sequi. Enim impedit laudantium eveniet odit iste praesentium inventore assumenda in ex? Rem ullam quibusdam soluta a ab consectetur, fugit incidunt eum placeat eos quos deserunt explicabo, obcaecati, aliquid enim? Tenetur officia aspernatur eaque est numquam? Qui, aut? Iste accusantium cum laudantium mollitia aspernatur facilis error quasi quis non consectetur fuga, nobis labore nisi dolor ipsum placeat tenetur eaque consequuntur excepturi ipsa nihil libero! Voluptate id sapiente esse voluptatum non, totam aspernatur dolorem provident cum tenetur alias cupiditate quis, ex minima libero cumque dolores asperiores.</p>

  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>