固定された高さなしに押し下げる内容がない限り、フッターをページの下に押してください

私はposition: absolute; bottom: 0またはposition: fixedなしの例を探しています。固定された高さなしに押し下げる内容がない限り、フッターをページの下に押してください

以下は、私が持っているレイアウトの例です。

私はmin-heightを探していますので、フッタを押し下げるのに十分なコンテンツがない場合は、ページ下部にフッタを配置したいと考えています。

.application-layout__container { 
 
    margin: 0 auto; 
 
    padding: 0 15px; 
 
} 
 

 
.button__left { 
 
    float: left; 
 
} 
 

 
.button__right { 
 
    float: right; 
 
} 
 

 
.application-layout__button-group { 
 
    clear: both; 
 
} 
 

 
.page-footer { 
 
    background-color: #0065bd; 
 
    color: #fff; 
 
    margin-top: 42px; 
 
} 
 

 
.page-footer nav { 
 
    font-weight: bold; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
    padding: 21px 0; 
 
} 
 

 
.page-footer nav a { 
 
    color: #fff; 
 
} 
 

 

 
}

<html> 
 

 
    <body> 
 
    <div> 
 
     <div class="application-layout__container"> 
 
     <div class="application-layout__header"> 
 
      <h1> 
 
     Application 
 
     </h1> 
 
     </div> 
 
     <div class="application-layout__body"> 
 
      <form> 
 
      <div class="form-group"> 
 
       <label for="input">Input</label> 
 
       <input id="input" type="text" /> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     <div class="application-layout__button-group"> 
 
      <div class="button__left"> 
 
      <button type="button"> 
 
       Back 
 
      </button> 
 
      </div> 
 
      <div class="button__right"> 
 
      <button type="button"> 
 
       Next 
 
      </button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="page-footer"> 
 
     <nav> 
 
     <a href="one">one</a> 
 
     <a href="two">two</a> 
 
     <a href="three">three</a> 
 
     <a href="four">four</a> 
 
     </nav> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-10-28 dagda1

あなたはフッターのためにピクセルで高さを定義することができますか？ –

可能であれば固定高さの定義を避けようとしています – dagda1

「位置」の問題 – zevee

-2

私はposition: absoluteとbottom: 0を使用して、問題が何であるかが表示されません。

.application-layout__container { 
 
    margin: 0 auto; 
 
    padding: 0 15px; 
 
} 
 

 
.button__left { 
 
    float: left; 
 
} 
 

 
.button__right { 
 
    float: right; 
 
} 
 

 
.application-layout__button-group { 
 
    clear: both; 
 
} 
 

 
.page-footer { 
 
position: absolute; 
 
bottom: 0; 
 
width: 100%; 
 
    background-color: #0065bd; 
 
    color: #fff; 
 
    margin-top: 42px; 
 
} 
 

 
.page-footer nav { 
 
    font-weight: bold; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
    padding: 21px 0; 
 
} 
 

 
.page-footer nav a { 
 
    color: #fff; 
 
} 
 

 

 
}

<html> 
 

 
    <body> 
 
    <div> 
 
     <div class="application-layout__container"> 
 
     <div class="application-layout__header"> 
 
      <h1> 
 
     Application 
 
     </h1> 
 
     </div> 
 
     <div class="application-layout__body"> 
 
      <form> 
 
      <div class="form-group"> 
 
       <label for="input">Input</label> 
 
       <input id="input" type="text" /> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     <div class="application-layout__button-group"> 
 
      <div class="button__left"> 
 
      <button type="button"> 
 
       Back 
 
      </button> 
 
      </div> 
 
      <div class="button__right"> 
 
      <button type="button"> 
 
       Next 
 
      </button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="page-footer"> 
 
     <nav> 
 
     <a href="one">one</a> 
 
     <a href="two">two</a> 
 
     <a href="three">three</a> 
 
     <a href="four">four</a> 
 
     </nav> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-10-28 14:33:52 zevee

コンテンツがいっぱいのスクリーン以上のものがあれば、コンテンツをプッシュダウンしたいので – dagda1

@ dagda1の「プッシュダウン」とはどういう意味ですか？ – zevee

それ以上のコンテンツがあると正常に動作するようにしたい – dagda1

固定された高さなしに押し下げる内容がない限り、フッターをページの下に押してください

答えて

関連する問題