CODEWITHSUNDEEP
htmlcssuser-interfacefrontend
M Asad Ali
M Asad Ali

Reputation: 106

Adding Footer at the end of Div having Position: Absolute

I have a webpage with following structure:

div: (app) 

    div: (navbar) 

    div: (wrapper) {position: relative}

        div: (intro) 

        div: (content) {position: absolute}

    div: (footer)

where div-content is dynamic that means it should extend if the data inside this div extends from its minimum height.

I am trying to add the footer at the end of the content but since content has absolute position, footer is being placed at the end of Intro.

I am beginner at front-end designing so pardon me if I am missing something basic. Please refer me some reading articles as well related to concepts about positioning divs.

This is my code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.App {
  text-align: center;
}

.navbar {
	height: 60px;
	background-color: #333;
}

.wrapper {;
  position: relative;
  border: 4px solid yellow;
}

.intro {
	height: 450px;
	background-color: blue;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 0 auto;
	padding-top: 70px; 
/*	align-items: center;
	justify-content: center;
	display: flex;*/
}

.content {
	position: absolute;
	top: 250px;
	width: 94%;
	right: 3%;
	left: 3%;
	background-color: white;
	border-radius: 6px; 
	box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
	max-width: 960px;
	margin: auto;

	min-height: 800px;
	background-color: gray;
}

.footer {
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
  background-color: red;
}


</style>
</head>

<body>
<div class="app">
  <div class="navbar">Navbar</div>
  <div class="wrapper">
  	<div class="intro">Intro</div>
  	<div class="content">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>
</body>
</html>

NOTE: .content is overlapped with .intro intentionally. and that is why i am using position absolute for .content

Upvotes: 1

Views: 143

Answers (2)

Mac
Mac

Reputation: 131

Remove position: absolute; from .content. This will fix the overlapping with the footer. The width will need to be adjusted accordingly (make width: 100%).

Updated: .contentto span width

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.App {
  text-align: center;
}

.navbar {
	height: 60px;
	background-color: #333;
}

.wrapper {;
  border: 4px solid yellow;
}

.intro {
	height: 450px;
	background-color: blue;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 0 auto;
	padding-top: 70px; 
}

.content {
    margin: -250px auto auto;
	width: 94%;
	background-color: white;
	border-radius: 6px; 
	box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
    max-width: 906px;
	
	min-height: 800px;
	background-color: gray;
}

.footer {
  width: 100%;
  height: 2.5rem;            /* Footer height */
  background-color: red;
}


</style>
</head>

<body>
<div class="app">
  <div class="navbar">Navbar</div>
  <div class="wrapper">
  	<div class="intro">Intro</div>
  	<div class="content">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>
</body>
</html>

Upvotes: 1

konrad
konrad

Reputation: 74

delete your content min-height. is that what you need?

Upvotes: 0

Related Questions