Reputation: 11

Having a div at bottom of a page?

I have a site that uses one stylesheet. Home page foot div Secondary page foot div

As you can seen on the secondary page it's not at the bottom of the page like it is on the home page. I'm not too sure what is wrong as i'm not really a master when it comes to css. I've updated it with all my code for my home page.

/* Dropdown Button */
.dropbtn {
    background-color: #333;
    color: white;
    padding-left: 35%;
    font-size: 45px;
	width:50px;
	height:55px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #AARRGGBB;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: absolute;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: fixed;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}














.topnav {
				position:fixed;
				top:0;
				left:0;
				right:0;
				width:100%;
				background-color: #333;
				overflow: hidden;
				}
				
.Head {
		Font-size:100%;
		color:White;
		position-static;
		 display:inline-block;
		 padding-left:15%;		

		

}	

.Time{ positon-absolute;
padding-left:5%;
 font-size:25px;
 color:white;
 display:inline-block;
 
}

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

.parallax { 
    background-image: url("Background.jpg");
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.search {
		Font-size:200%;
		color:White;
		position-static;
		 display:inline-block;
padding-left:2.5%;}

.search2 {
		Font-size:200%;
		color:White;
		position-static;
		 display:inline-block;
padding-left:15%;
width:2%;
height:2%;
top:1;}





.box1{
		Font-size:100%;
		color:White;
		left:0;
		right:0;
		width:100%;
		background-color: #332;
		overflow: hidden;
		position-fixed;
		margin-top:15%;
		margin-bottom:5%;
		text-align:center;
		
}
.box1 p{font-size:200%;}




.footer{
		
		position:static;
				bottom:0;	
				width:100%;
				background-color: #333;
				overflow: hidden;
				margin-bottom:-1%;
			
				}
	
	
	
}

<!DOCtype html>
<html>
<Head>
<title> Stirling music festival</title>

 <Link rel="stylesheet" href="Dropdown.css">


 

</head>
<body class="parallax">

		<div class="topnav">
			<div class="dropdown">
				  <button onclick="myFunction()" class="dropbtn">≡</button>
					  <div id="myDropdown" class="dropdown-content">
						<a href="../Brandon test/About-Us.html">About us</a>
						<a href="../Brandon test/Line-Up.html">Line Up</a>
						<a href="../Brandon test/Gallery.html">Gallery</a>
						<a href="../Brandon test/Resources.html">Resources</a>
						<a href="../Brandon test/Join-Us.html">Join us</a>
						<a href="../Brandon test/Merchandise.html">Merchandise</a>
					
					  </div>
				</div>

				<div class="Time">
					<p id="Timer">
				</div>

					<a href="../Brandon test/Homepage.html"><h1 class="Head" style= text-align:center;>Stirling music festival</h1></a>
				
					<Form class ="search" action="results.php" method="post">
						
						<input type="text" name="search">
						<input type="submit">
					</form>
					
					<a href ="../Brandon test/About-Us.html"><img src="gear-icon.ico" class="search2"></a>
				
		</div>
		
		
	
		<div class="box1"; >
		<h1>Line Up</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non felis convallis, blandit odio sed, pretium mauris. Donec vel imperdiet odio. Duis sit amet magna molestie felis sagittis pharetra. Morbi mattis at enim in tempor. Donec id posuere leo. Phasellus dictum tempor nisl, sed aliquet nunc cursus non. Nunc at elit mollis enim consectetur sodales ut ac purus. Suspendisse dapibus, turpis in ornare dapibus, est tortor suscipit eros, non facilisis neque felis eu felis. Quisque nulla sapien, ultrices at arcu quis, elementum maximus dolor. Integer sit amet ipsum felis.</p>
		
		</div>
		
			<div class="box1"; >
		<h1>Line Up</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non felis convallis, blandit odio sed, pretium mauris. Donec vel imperdiet odio. Duis sit amet magna molestie felis sagittis pharetra. Morbi mattis at enim in tempor. Donec id posuere leo. Phasellus dictum tempor nisl, sed aliquet nunc cursus non. Nunc at elit mollis enim consectetur sodales ut ac purus. Suspendisse dapibus, turpis in ornare dapibus, est tortor suscipit eros, non facilisis neque felis eu felis. Quisque nulla sapien, ultrices at arcu quis, elementum maximus dolor. Integer sit amet ipsum felis.</p>
		
		</div>
		
			<div class="box1"; >
		<h1>Line Up</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non felis convallis, blandit odio sed, pretium mauris. Donec vel imperdiet odio. Duis sit amet magna molestie felis sagittis pharetra. Morbi mattis at enim in tempor. Donec id posuere leo. Phasellus dictum tempor nisl, sed aliquet nunc cursus non. Nunc at elit mollis enim consectetur sodales ut ac purus. Suspendisse dapibus, turpis in ornare dapibus, est tortor suscipit eros, non facilisis neque felis eu felis. Quisque nulla sapien, ultrices at arcu quis, elementum maximus dolor. Integer sit amet ipsum felis.</p>
		
		</div>
		
			<div class="box1"; >
		<h1>Line Up</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non felis convallis, blandit odio sed, pretium mauris. Donec vel imperdiet odio. Duis sit amet magna molestie felis sagittis pharetra. Morbi mattis at enim in tempor. Donec id posuere leo. Phasellus dictum tempor nisl, sed aliquet nunc cursus non. Nunc at elit mollis enim consectetur sodales ut ac purus. Suspendisse dapibus, turpis in ornare dapibus, est tortor suscipit eros, non facilisis neque felis eu felis. Quisque nulla sapien, ultrices at arcu quis, elementum maximus dolor. Integer sit amet ipsum felis.</p>
		
		</div>
		
		
		<div class="footer">
		<h1> the end</h1>
		</div>
		
	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
			<script>
			/* When the user clicks on the button, 
			toggle between hiding and showing the dropdown content */
			function myFunction() {
				document.getElementById("myDropdown").classList.toggle("show");
			}

			// Close the dropdown if the user clicks outside of it
			window.onclick = function(event) {
			  if (!event.target.matches('.dropbtn')) {

				var dropdowns = document.getElementsByClassName("dropdown-content");
				var i;
				for (i = 0; i < dropdowns.length; i++) {
				  var openDropdown = dropdowns[i];
				  if (openDropdown.classList.contains('show')) {
					openDropdown.classList.remove('show');
				  }
				}
			  }
			}
			</script>
			<script>
		// Set the date we're counting down to
		var countDownDate = new Date("Jun 21, 2018 15:37:25").getTime();

		// Update the count down every 1 second
		var x = setInterval(function() {

		  // Get todays date and time
		  var now = new Date().getTime();

		  // Find the distance between now an the count down date
		  var distance = countDownDate - now;

		  // Time calculations for days, hours, minutes and seconds
		  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
		  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

		  // Display the result in the element with id="demo"
		  document.getElementById("Timer").innerHTML = days + "d " + hours + "h "
		  + minutes + "m " + seconds + "s ";

		  // If the count down is finished, write some text 
		  if (distance < 0) {
			clearInterval(x);
			document.getElementById("Timer").innerHTML = "EXPIRED";
				}
			}, 1000);
		</script>
</body>
</html>

Upvotes: 1

Answers (4)

Xavier

Reputation: 130

I think what you're looking for is a sticky footer. There are several ways to do it, this is one method that I know of using flexbox:

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header {
    padding: 20px;
    background: dodgerblue;
}

main {
    padding: 10px;
}

footer {
    padding: 10px;
    background: firebrick;
}

<header>
        <h1>This is the header</h1>
    </header>
    <main class="container">
        <h1>This is the main content area</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsum commodi harum labore nesciunt, et modi iusto vitae nam eum deleniti, officia praesentium corporis quasi
        </p>
    </main>
    <footer>
        <h1>Footer</h1>
    </footer>

Upvotes: 1

Shreevardhan

Reputation: 12651

Better to use CSS flexbox for sticky footer. Example

section {
  display: flex;
  flex-direction: column;
}

section > article { flex: auto }

/* Preview only */
section { height: 100vh }
header { background: red }
article { background: green }
footer { background: blue }

<section>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</section>

Upvotes: 1

Rajan Benipuri

Reputation: 1832

Use Position fixed in place of position static.

.footer{
position:fixed;
bottom:0;   
width:100%;
background-color: #333;
overflow: hidden;

}

    <div class="footer">
        <h1> the end</h1>
        </div>

Upvotes: 1

Rohit Kumar

Reputation: 1792

Add position:relative to your wraper class. Add position:absolute;bottom:0; to the stream-content class.

.footer {width: 100%;height:5px;}
.footer, .push {height:5px;}

Fiddle

I copied solution from this link

Upvotes: 1

Having a div at bottom of a page?

Answers (4)

Related Questions