Put html elements one below the other

Question

Put html elements one below the other

Navigation

#1 by (3 votes)

1

Hello my html structure would be:

.navbar {
  background-color: #62ADD6;
  font-size: 15px;
  border: 0;
  position: fixed;
  height: 80px;
}

#pie {
  display: block;
  position: absolute;
  background-color: #2f43c1;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100px;
  padding-top: 5px;
}

#section {
  display: block;
  position: absolute;
  font-size: 20px;
  top: 80px;
  color: blue;
  /*height: calc(100% - 120px);*/
  height: 750px;
  background-color: black;
  width: 100%;
  padding: 5px;
}

<nav></nav>
<section></section>
<footer></footer>

How could I make the footer under the section and even if it were made larger than the size of the screen the footer will be lowered with the end of the section?

html5 css

asked by bsg 28.03.2017 в 10:40

source

1 answer

How to fill a select dynamically, AngularJS? Validate Json API response

score 3 · Answer 1

I do not really know what you're asking. With a display block there would be a block below the previous one according to its layout in the HTML, eg:

    	nav,
    	footer,
    	section { 
    		display: block;
    		height: 100px;
    	}
    	nav {
    		background: grey
    	}
    	footer {
    		background: pink
    	}
    	section {
    		background: blue
    	}

    
    <nav></nav>
    <section></section>
    <footer></footer>

Note: the heights and background colors are to allow you to see the elements differentiated between them.