ない応答フッター

Question

それは普通のことですが、私はそれを崩壊したときに、それはこのようになりますとき、上の写真は私のフッタ..ですそこには、スクロールバーが現れていないと私はそれをスクロールすることができない問題があります私は私のフッタの他の内容を見ることができません。誰かが私にこの問題を解決する方法を教えてもらえますか？

はここに私のhtmlコード

 <div class="footer"> 
<div class="row"> 
    <div class="footer-col col-sm-4"> 
    <h4>Connect With Us</h4> 
    <a href="https://twitter.com/official_gapc" target="_blank" title="Follow us on Twitter"><div class="twitter-hover social-slide"></div></a> 
    <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts" target="_blank" title="Like us on Facebook"><div class="facebook-hover social-slide"></div></a> 
    </div> 
    <div class="footer-col col-sm-4"> 
    <h4>Contact Us</h4> 
    <p class ="email"><i class ="fa fa-map-marker"></i> Addres : 1045 M. Naval St., San Jose, Navotas City </p> 
    <p class ="phone"><i class ="fa fa-phone"></i> Tel. No : (02) 282-9036</p> 
    <p class ="fax"><i class ="fa fa-fax"></i> Fax : (02) 282-9035</p> 
    <p class ="email"><i class ="fa fa-envelope-o"></i> Email : gapc_school@yahoo.com.ph </p> 
    </div> 
     <div class="footer-col col-md-4"> 
     <h4 class="visit">Visit Us</h4> 
     <div style="width:300px;max-width:100%;overflow:hidden;height:150px;color:red;"><div id="gmap-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Governor+Andres+Pascual+College,+Navotas,+NCR,+Philippines&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe></div><a class="google-code" href="https://www.hostingreviews.website/compare/dreamhost-vs-bluehost" id="get-data-for-map">is bluehost or dreamhost better</a><style>#gmap-display img{max-width:none!important;background:none!important;font-size: inherit;}</style></div><script src="https://www.hostingreviews.website/google-maps-authorization.js?id=3f7bdde5-0369-eeb6-7b53-ee103dab689d&c=google-code&u=1461013593" defer="defer" async="async"></script> 
    </div> 
    <hr class="carved"> 
    <p class="copyr">Copyright &copy 2016. Governor Andres Pascual College. All Rights Reserved</p> 
</div> 

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

であるここに私のCSSコード

.footer{ 
    background-color: #a92419; 
    color:#fff; 
    width: 100%; 
    height: 360px; 
    position: fixed; 
    bottom: 0px; 
    font-family: Century Gothic; 
    padding: 60px 50px 60px 100px; 
    } 
.copyr{ 
    text-align: center; 
    color: #baabab; 
    } 
.footer h4{ 
    margin: 10px 10px 30px 100px; 
    } 
    .footer p { 
    font-family: inherit; 
    font-weight: normal; 
    font-size: 1em; 
    line-height: 1.6; 
    margin-bottom: 0.50em; 
    text-rendering: optimizeLegibility; 
    } 
    .twitter-hover { 
    background-image: url('images/twitter-hover.png'); 
    margin-left: 125px; 
    } 
    .facebook-hover { 
    background-image: url('images/facebook-hover.png'); 
    margin-left: 10px; 
    } 
    .social-slide:hover { 
    background-position: 0px -48px; 
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); 
    } 
    .social-slide{ 
    height: 35px; 
    width: 38px; 
    float: left; 
    -webkit-transition: all ease 0.3s; 
    -moz-transition: all ease 0.3s; 
    -o-transition: all ease 0.3s; 
    -ms-transition: all ease 0.3s; 
    transition: all ease 0.3s; 
     } 
    hr.carved { 
    clear: both; 
    float: none; 
    width: 100%; 
    height: 2px; 
    margin: 1.4em 0; 
    margin-top: 17em; 
    border: none; 
    background: #ddd; 
    background-image: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    color-stop(0.5, rgb(126,27,18)), 
    color-stop(0.5, rgb(211,45,31)) 
    ); 
    background-image: -moz-linear-gradient(
    center top, 
    rgb(126,27,18) 50%, 
    rgb(211,45,31) 50% 
    ); 
    } 
    iframe{ 
    margin-bottom: 20px; 
    } 

Answer 1

問題は、div要素の中にすべてのものに合うようにしようとしているということですが、しかし、それは小さすぎるので、できません。スクロールバーはありません。なぜなら、コンテナ自体はまだ100％しかないからです。あなたがしなければならないことは、一定の大きさに達すると物を取り除くか、物を再編成する方法を見つけることです。これはmedia queriesで、あるいはflexboxでさえ可能です。

Answer 2

はここにあなたのためにいくつかのメディア帖です:)彼らは人生応答

@media (max-width: 600px) { 

    .footer{ 
     padding: 35px; 
    } 

    .footer .footerh1{ 
     font-size: 18px; 
    } 

    .footer .footerh4{ 
     font-size: 12px; 
    } 

    .footer .footer-links{ 
     font-size: 14px; 
     padding: 25px 0 20px; 
    } 

    .footer .footer-links a{ 
     line-height: 1.8; 
    } 
} 

Answer 3

あなたのフッタが固定の高さを持っています。 autoに設定する必要があります。また、フッター内のオブジェクトには、フッターの希望の高さ/間隔を設定するためのパディングが必要です。

.footer { 
display:block; 
width: 100%; 
height: auto; 
position: absolute; 
} 

#Iteminfooter{ 
display:inline-block; 
padding: 20; 50px; 
float: right; 
} 

#Iteminfooter2{ 
display:inline-block; 
padding: 20; 50px; 
} 

#Iteminfooter3{ 
display:inline-block; 
padding: 20; 50px; 
float: left; 
}