I would like a layout so my aside is not joining with the footer

Question

I would like a layout so my aside is not joining with the footer

Navigation

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

2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Example1</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                
            }
            header {
                background-color: aqua;
                display: block;
                float: right;
                padding: 1em;
                width: 85%;
            }
            main {
                background-color: fuchsia;
                display: block;
                float: right;
                padding: 1em;
                width: 85%;
                height: 300px;
            }
            aside {
                background-color: firebrick;
                padding: 1em;
                width: 15%;
            }
            footer {
                background-color: chartreuse;
                clear: both;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <header>HEADER</header>
        <main>MAIN</main>
        <aside>ASIDE</aside>
        <footer>FOOTER</footer>
    </body>
</html>

html5 css3

asked by anonymous 05.07.2017 / 15:44

2 answers

1

Try to put position absolute and height 100% .

aside {
    background-color: firebrick;
    padding: 1em;
    width: 15%;
    height: 100;
    position: absolute;
}

05.07.2017 / 15:48

How to calculate the logarithm of a number in any base in java? How to find out the JVM port in linux?

score 2 · Accepted Answer

What you did in your code is not very cool. You have set the size of the menu, it will always be height: 300px; on any screen size. If that is the intention, you can do the same for aside .

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100%;
}

header {
  background-color: aqua;
  display: block;
  float: right;
  padding: 1em;
  width: 85%;
}

main {
  background-color: fuchsia;
  display: block;
  float: right;
  padding: 1em;
  width: 85%;
  height: 300px;
}

aside {
  background-color: firebrick;
  padding: 1em;
  width: 15%;
  height: 352px;
}

footer {
  background-color: chartreuse;
  clear: both;
  padding: 1em;
}

<title>Example1</title>


<body>
  <header>HEADER</header>
  <main>MAIN</main>
  <aside>ASIDE</aside>
  <footer>FOOTER</footer>
</body>

I recommend you do as follows:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.geral {
  min-height: 100%;
  position: relative;
  height: 100%;
}

.header {
  background-color: aqua;
  display: block;
  float: right;
  padding: 1em;
  width: 85%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: chartreuse;
  clear: both;
  padding: 1em;
}

.content {
  background-color: fuchsia;
  display: block;
  float: right;
  padding: 1em;
  width: 85%;
  height: 70%;
}

.aside {
  background-color: firebrick;
  padding: 1em;
  width: 15%;
  height: 100%;
}

<title>Example1</title>

<body>

  <div class="geral">
    <div class="header">
      HEADER
    </div>

    <div class="content">
      MAIN
    </div>
    <div class="aside">
      ASIDE
    </div>
    <div class="footer">
      FOOTER
    </div>
  </div>

</body>

In this way, you do not set a size for your main (I changed the name to content , because it is in that space that you put the contents of your site).