我有一个使用一个样式表的网站。 Home page foot div Secondary page foot div
正如您在辅助页面上看到的那样，它不在页面底部，就像在主页上一样。我不太确定什么是错的，因为我在css时并不是真正的主人。我已用我主页的所有代码更新了它。
/* 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>
答案 0 :(得分：1)
添加位置：相对于你的包装类。添加位置：绝对;底部：0;到流内容类。
.footer {width: 100%;height:5px;}
.footer, .push {height:5px;}
我从此Fiddle
复制了解决方案答案 1 :(得分：1)
使用位置固定代替静态位置。
.footer{
position:fixed;
bottom:0;
width:100%;
background-color: #333;
overflow: hidden;
}
<div class="footer">
<h1> the end</h1>
</div>
答案 2 :(得分：1)
最好将CSS flexbox用于粘性页脚。实施例
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>
答案 3 :(得分：1)
我认为你正在寻找的是一个粘性的页脚。有几种方法可以做到这一点，这是我所知道的使用flexbox的一种方法：
Try
If txtFirstName.Text.Length > 0 And txtStudentImage.Text.Length > 0 Then
Dim FileName As String = txtStudentImage.Text
Dim ImageData() As Byte
fs = New FileStream(FileName, FileMode.Open, FileAccess.Read)
br = New BinaryReader(fs)
ImageData = br.ReadBytes(CType(fs.Length, Integer))
br.Close()
fs.Close()
Dim CmdString As String = "INSERT INTO Students(FirstName, LastName, Image, Address) VALUES(@FirstName, @LastName, @Image, @Address)"
cmd = New MySqlCommand(CmdString, con)
cmd.Parameters.Add("@FirstName", MySqlDbType.VarChar, 45)
cmd.Parameters.Add("@LastName", MySqlDbType.VarChar, 45)
cmd.Parameters.Add(";@Image", MySqlDbType.Blob)
cmd.Parameters.Add("@Address", MySqlDbType.VarChar, 100)
cmd.Parameters("@FirstName").Value = txtFirstName.Text
cmd.Parameters("@LastName").Value = txtLastName.Text
cmd.Parameters("@Image").Value = ImageData
cmd.Parameters("@Address").Value = txtAddress.Text
con.Open()
Dim RowsAffected As Integer = cmd.ExecuteNonQuery()
If (RowsAffected > 0) Then
MsgBox("Image saved successfully!")
End If
con.Close()
Else
MsgBox("Incomplete data!", MsgBoxStyle.Critical, "")
End If
Catch ex As Exception
MsgBox(ex.ToString())
Finally
If con.State = ConnectionState.Open Then
con.Close()
End If
End Try
If fileOpener.ShowDialog() = Windows.Forms.DialogResult.OK Then
pbStudentImage.Image = Image.FromFile(fileOpener.FileName)
txtStudentImage.Text = fileOpener.FileName
End If