Why is my footer floating to the top?
Question
The image elements in the HTML body don't seem to be included in the body, and new elements will push them down the page as seen with the <footer> tag as seen here:
.
Setting height/min-height to 100% is ineffective. The only issues that arise with a HTML validator are that the images don't have alt text.
html,body { margin:0px; background-image: url("bilder/curtains.jpg"); background-size:auto; } body { border:solid 1px orange; min-height:100%; } header { font-family:Cinzel; height:75px; background-color:black; color:#fff; border-bottom: 4px dotted white; box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5; color:#e5c006; margin-bottom:50px; } header img { float: left; margin-right: 1em; } header h1 { margin: 0px; } header h3 { margin: 0px; } nav { position: absolute; top:25px; right:2em; } nav ul { margin: 0px; } nav li { display: inline-block; margin:5px; } nav a { text-decoration: none; color:#fff; } nav a:hover { transition: width 5s, height 4s; color:#e5c006; } .poster_container { display:inline-block; z-index:-1 ; padding:0; margin:auto; height:130%; background-color:black; position:relative; width:130%; left:-15%; top:-15%; border: 3px solid gold; } #theater_1 { float:left; text-decoration:none; color:gold; width:30%; height:500px; margin:50px; text-align:center; background-image: url('bilder/it_movie_poster.jpg'); background-size: 100%; background-position: center; background-repeat: no-repeat; margin-left:10%; border:2px solid gold; } #theater_2 { float:right; width:30%; height:500px; margin:50px; color:gold; text-align:center; background-image: url('bilder/the_big_sick_movie_poster.jpg'); background-position: center; background-repeat: no-repeat; background-size: 100%; margin-right:10%; border:2px solid gold; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>The Pop Theater</title> <link rel = "stylesheet" type = "text/css" href = "pracstyle.css"/> <link rel="shortcut icon" href="title_image_2.ico"/> </head> <body> <header> <a href="home.html"><img src="#" /></a> <h1>The Practice Theater</h1> <h3>Entertaining the Beverly Hills since 1776</h3> <nav> <ul> <li><a href="home.html">Now Showing</a></li> <li><a href="coming_soon.html">Coming Soon</a></li> <li><a href="history.html">History</a></li> <li><a href="#">Deals</a></li> <li><a href="advertise.html">Advertise Here!</a></li> </ul> </nav> </header> <a href="theater_1.html"> <div id="theater_1"> <div class="poster_container"> </div> </div> </a> <a href="theater_2.html"> <div id="theater_2"> <div class="poster_container"> </div> </div> </a> <footer> <h2>THE FOOTER APPEARS HERE</h2> </footer> </body> </html>
2 answers
solution1
3 ACCPTED 2017-09-08 17:22:30
When items are floating, they come out of the flow of the rest of the document and can give you strange results like this.
The simplest solution is to add a clear to the footer. A clear more or less tells the element to clear the floating items, or go below them, instead of under them.
footer {
clear: both;
}
For better control on things, I'd suggest also looking into the clearfix .
solution2
0 2017-09-08 17:25:20
您还可以将overflow属性用于具有auto, visible和hidden选项的父元素。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.