CODEWITHSUNDEEP
htmlcssheaderfooter
Adler
Adler

Reputation: 2807

header, main and footer positioning

My page is divided in to 3 pieces. The header the main and the footer. The header is fixed to the top and is 109px with its 6px border high so the main has a 109px margin to the top. I want the main to extend over the entire page below the header and to the footer that should, if no content that is available to push it down, rest on the bottom of the screen. The footer is 86px high because it is 80px and 6px for a border at the top. How can I achieve all this. I have no Idea

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  margin: 0;
  padding-bottom: 9rem;
  min-height: 100%;
}


/* ---------------------------------------------------------------- */

main {
  margin-top: 109px;
  text-align: center;
  min-height: 100%;
  min-width: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.75);
  z-index: 99;
}

#heading {
  font-family: "Arial";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}


/* ---------------------------------------------------------------- */

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}
<div id="all">
  <header id="header">
    <h1 id="heading">My Page</h1>
  </header>
  <main id="main">



  </main>
  <footer id="footer">
    <p id="credit">FOOTER</p>
  </footer>
</div>

Upvotes: 0

Views: 3844

Answers (2)

Shiva127
Shiva127

Reputation: 2623

You just need to remove the padding-bottom from the body and replace the margin-top by padding-top & padding-bottom:

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
}

/* ---------------------------------------------------------------- */

main {
  padding-top: 109px;
  padding-bottom: 86px;
  text-align: center;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.75);
  z-index: 99;
}

#heading {
  font-family: "Arial";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#navigation {
  margin: 0px;
  margin-bottom: 20px;
  padding: 0px;
}

.navigationlink {
  font-family: "Helvetica";
  text-decoration: none;
  font-weight: 800;
  color: #ffffff;
  font-size: 11px;
  height: 52px;
  letter-spacing: 1px;
  margin: 0 10px;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  text-transform: uppercase;
  transition: color 0.3s;
}

.navigationlink:hover {
  color: #c1b497;
}

.activelink:hover {
  border-bottom-color: #c1b497;
}

.activelink {
  border-bottom: 2px solid #ffffff;
  transition: color 0.3s;
}

/* ---------------------------------------------------------------- */

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}
<div id="all">
  <header id="header">
    <h1 id="heading">My Page</h1>
    <nav id="navigation">
      <a class="navigationlink activelink" href="index.html">Home</a>
      <a class="navigationlink" href="page1.html">Page1</a>
      <a class="navigationlink" href="page2.html">Page2</a>
      <a class="navigationlink" href="page3.html">Page3</a>
      <a class="navigationlink" href="page4.html">Page4</a>
    </nav>
  </header>
  <main id="main"></main>
  <footer id="footer">
    <p id="credit">FOOTER</p>
  </footer>
</div>

Upvotes: 1

Theodore K.
Theodore K.

Reputation: 5176

Please make your question more clear, I'll give it a try though, is this what you want (fixed positions and removed unnecessary margins)?

html {
  	height: 100%;
    box-sizing: border-box;
}
body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
 	  min-height: 100%;
}

	/* ---------------------------------------------------------------- */

main {
    text-align: center;
    min-height: 100%;
  	min-width: 100%;
}

#header {
	background-color: #25211e;
	border-bottom: 6px solid #1d1a18;
	text-align: center;
  width: 100%;
  height: 103px;
  box-shadow: 0px 0px 14px 2px rgba(0,0,0,0.75);
  z-index: 99;
}

#heading {
  font-family: "Arial";
	color: #c1b497;
	font-size: 45px;
	display: inline-block;
	margin-bottom: 10px;
	margin-top: 15px;
}

#navigation {  
	margin: 0px;
	margin-bottom: 20px;
	padding: 0px;

}

.navigationlink {
	font-family: "Helvetica";
	text-decoration: none;
	font-weight: 800;
	color: #ffffff;
	font-size: 11px;
	height: 52px;
	letter-spacing: 1px;
	margin: 0 10px;
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
	text-transform: uppercase;
	transition: color 0.3s;
}	

.navigationlink:hover {
	color: #c1b497;
}

.activelink:hover {
	border-bottom-color: #c1b497;
}

.activelink {
	border-bottom: 2px solid #ffffff;
	transition: color 0.3s;
}
	/* ---------------------------------------------------------------- */

#footer {
    background-color: #25211e;
	border-top: 6px solid #1d1a18;
	text-align: center;
	position: fixed;
  	right: 0;
 	bottom: 0;
  	left: 0;
  	height: 80px;
  	z-index: 98;
}

#credit {
    font-family: "Helvetica";
    font-size: 14px;
	color: #c1b497;
	font-weight: 600;
}
	<div id="all">
			<header id="header">
              	<h1 id="heading">My Page</h1>
                <nav id="navigation">
					<a class="navigationlink activelink" href="index.html">Home</a>
					<a class="navigationlink" href="page1.html">Page1</a>
					<a class="navigationlink" href="page2.html">Page2</a>
					<a class="navigationlink" href="page3.html">Page3</a>
					<a class="navigationlink" href="page4.html">Page4</a>
				</nav>
            </header>
			<main id="main">
      
      
      
			</main>
			<footer id="footer">
				<p id="credit">FOOTER</p>
			</footer>
		</div>

Upvotes: 0

Related Questions