2017-10-17 22 views
0

私はコーディングとHTMLページを作成するのは初めてですが、フッタが下には行かないので、私のコードは以下のとおりです。 CSSのフッタにはいくつかの問題があります。誰でも修正したり、ウェブページの下部にフッターを残す方法を教えてください。フッタは固定されていない下部にあるはずですが、ページに多くのコンテンツがある場合はフッターは底に行くべきです。フッタがページの下部に表示されない

HTMLコード:

<html> 
<head> 
    <title>Ka</title> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 

<body> 


<header> 
    <nav> 
    <h1> Ka </h1> 
    <ul id="nav"> 
    <li><a class="homered" href="#">Heading</a></li> 
    <li><a class="homeblack" href="#">heading1</a></li> 
    <li><a class="homeblack" href="#">heading1</a></li> 
    <li><a class="homeblack" href="#">heading1</a></li> 
    <li><a class="homeblack" href="#">heading1</a></li> 
    <li><a class="homeblack" href="#">heading1 </a></li> 
    </ul> 
</nav> 
<a href="kaindex.html" ><span class="langsel" style="color: white">others</span> </a> 
</header> 


<div class="divider"></div> 
<div class="slideshow-container"> 

<div class="mySlides fade"> 
    <img src="images/1.jpg" height="60%" width="100%"> 
    </div> 

<div class="mySlides fade"> 
    <img src="images/2.jpg" height="60%" width="100%"> 
    </div> 

<div class="mySlides fade"> 
    <img src="images/3.jpg" height="60%" width="100%"> 
    </div> 

<div class="mySlides fade"> 
    <img src="images/4.jpg" height="60%" width="100%"> 
    </div> 

<div class="mySlides fade"> 
    <img src="images/5.jpg" height="60%" width="100%"> 
    </div>  

<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
<a class="next" onclick="plusSlides(1)">&#10095;</a> 

</div> 
<br> 

<div style="text-align:center"> 

    <span class="dot" onclick="currentSlide(1)"></span> 
    <span class="dot" onclick="currentSlide(2)"></span> 
    <span class="dot" onclick="currentSlide(3)"></span> 
    <span class="dot" onclick="currentSlide(4)"></span> 
    <span class="dot" onclick="currentSlide(5)"></span> 
</div> 


<div class="page-wrap"> 

<div class="boxed"> 
    <h2>Ka:</h2> 
    <p> Kaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p> 
</div> 


<div class="boxed"> 
<h2>Ka:</h2> 

<p> kaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p> 
</div> 

<div class="boxed"> 
<h2>ka:</h2> 

<p> kaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p> 
</div> 

<div class="boxed"> 
<h2>ma:</h2> 

<p> maaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> 
</div> 

<div class="boxed"> 
<h2>la:</h2> 

<p> Laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p> 
</div> 

<div class="boxed"> 
<h2>ca:</h2> 

<p> caaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p> 
</div> 


<div class="boxed"> 
<h2>Ca:</h2> 

<p> caaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p> 
</div> 

</div> 


    <footer class="site-footer">  
     <p style="copyright">Copyright &copy; aaa </p> 


     </footer>  





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

    <script src="js/home.js"></script> 

</body> 

</html> 

CSSコード:

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

header{ 
    background: blue; 
    color: white; 
    padding: 8px 0px 6px 40px; 
    height: 50px; 
} 

header h1 { 
display: inline; 
font-family: 'Oswald',sans-serif; 
font-weight: 400; 
font-size: 32px; 
float: left; 
margin-top: 0px; 
margin-right: 10px; 
} 

nav ul{ 
    display: inline; 
padding: 0px; 
float: left; 
} 

nav ul li{ 
display: inline-block; 
list-style-type:none; 
color: white; 
float: left; 
margin-left: 15px; 
} 

nav ul li a{ 
color: white; 
text-decoration: none; 
} 
#nav { 
font-family: 'Montserrat', sans-serif; 

} 

.homered{ 
background-color: yellow; 
padding: 30px 10px 25px 10px; 

} 

.langsel{ 

    float: right; 

} 


.divider{ 
background-color: red; 
height: 5px; 

} 

.homeblack:hover{ 
background-color: black; 
padding: 30px 10px 25px 10px; 
} 

.mySlides {display:none} 

/* Slideshow container */ 
.slideshow-container { 
    max-width: 1000px; 
    position: relative; 
    margin: auto; 
} 

/* Next & previous buttons */ 
.prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    padding: 16px; 
    margin-top: -22px; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
} 

/* Position the "next button" to the right */ 
.next { 
    right: 0; 
    border-radius: 3px 0 0 3px; 
} 

/* On hover, add a black background color with a little bit see-through */ 
.prev:hover, .next:hover { 
    background-color: rgba(0,0,0,0.8); 
} 


/* The dots/bullets/indicators */ 
.dot { 
    cursor:pointer; 
    height: 13px; 
    width: 13px; 
    margin: 0 2px; 
    background-color: #bbb; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
} 

.active, .dot:hover { 
    background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

/* On smaller screens, decrease text size */ 
@media only screen and (max-width: 300px) { 
    .prev, .next {font-size: 11px} 
} 


.boxed { 
    float: left ; 
    border: 5px solid green ; 
    border-radius: 10px ; 
    height: 100px; 
    width: 400px; 
    padding: 10px; 
    margin: 30px; 

} 

.site-footer{ 
     position:absolute; 
    width:100%; 
    height:30px; /* Height of the footer */ 
    background:green; 
     font-weight: bold; 
    color: white; 
    font-size:20px; 
    text-align: center; 
    font-family: 'Montserrat', sans-serif; 
     left:0; 
    bottom:0; 
    right:0; 
margin-bottom: 0px; 

} 


#rowDiv{ 
    margin:auto; 
    text-align: center; 
    width: 100%; 
} 
input[type="text"]{ 
    height:40px; 
    font-size:20px; 

} 
#submitWeather{ 
    height:40px; 
    font-size:20px; 
    font-weight: bold; 
} 

#show{ 
    margin: auto; 
    width: 60%; 
} 


#errorCity{ 
    width: 50%; 
    font-size: 25px; 
    text-align: center; 
    margin: auto; 

} 
+0

可能な重複: //stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – ProEvilz

答えて

0

メークポジションを使用してみてください:相対;またはそれに

.site-footer { 
     clear: both; 
     position: relative; 
     width: 100%; 
     height: 30px; 
     background: green; 
     font-weight: bold; 
     color: white; 
     font-size: 20px; 
     text-align: center; 
     font-family: 'Montserrat', sans-serif; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     margin-bottom: 0px; 
    } 

を削除して、最後の箱入りのクラスの後

<div style="clear:both;"> 
</div> 

を追加

[Webページの一番下に滞在するフッターを取得するにはどうすればよい?](HTTPSの
0

clear:both;https://developer.mozilla.org/en-US/docs/Web/CSS/clear

.site-footer{ 
    width:100%; 
    height:30px; /* Height of the footer */ 
    background:green; 
    font-weight: bold; 
    color: white; 
    font-size:20px; 
    text-align: center; 
    font-family: 'Montserrat', sans-serif; 
    margin-bottom: 0px; 
    clear: both; 
} 
関連する問題