固定フッターの作成方法は？

<section> 
<div class="main-wrapper"> 
    <div class="upper-div"> 
    <img src="images/pic.jpg" class="img-responsive" alt=""> 
    </div> 
    <div class="lower-div"> 
    <div class="header"> 
     <p>Header</p> 
    </div> 
    <div class="content"> 
     <div class="content-card"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi possimus alias numquam sunt perspiciatis sint, molestiae aperiam, rerum, deleniti quos. Repellat tenetur, repudiandae quae odit obcaecati libero magnam vero.</p> 
     </div> 
     <div class="content-card"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p> 
     </div> 
     <div class="content-card"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p> 
     </div> 
    </div> 
    <div class="footer"> 
     <p>Footer</p> 
    </div> 
    </div> 
</div>

固定フッターの作成方法は？

.main-wrapper{ 
padding:15px; 
} 

.header, 
.footer{ 
    text-align: center; 
} 

.header p, 
.footer p{ 
    padding:10px; 
    background-color: green; 
    color: white; 
} 

.content{ 
    height: 200px; 
    overflow: scroll; 
} 

.content-card{ 
    border-bottom: 1px solid black; 
}

私はフッターのdivと下0に固定された位置を与えてみましたが、その後、それはdiv要素の外に出ると、外のメインラッパーのパディングを否定。どのように私はそれを修正してコンテンツラッパーに特定の高さを与える必要はありませんし、コンテンツdivの高さはデバイスに適応し、フッターは下部に固定されています。

出典

2017-12-13 Ashutosh Shrestha

あなたの質問をしてください明確にすることができます。フッターが親のdivに残り、親のパディングを尊重するだけでなく、画面の一番下に固定することもできますか？ – Anthony

使用しているCSSを含めることはできますか？ – signal2013

[Twitter Bootstrap 3 Sticky Footer]（https://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer） –

あなたのヘッダとそれが似て作るためにフッタの幅を小さくする必要があります。

.main-wrapper{ 
 
padding:15px; 
 
} 
 

 
.header, 
 
.footer{ 
 
    text-align: center; 
 
} 
 

 
.header p, 
 
.footer p{ 
 
    padding:10px; 
 
    background-color: green; 
 
    color: white; 
 
} 
 

 
.content{ 
 
    height: 200px; 
 
    overflow: scroll; 
 
} 
 

 
.content-card{ 
 
    border-bottom: 1px solid black; 
 
} 
 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 20px; 
 
    left: 20px; 
 
    width: 93%; 
 
}

<section> 
 
<div class="main-wrapper"> 
 
    <div class="upper-div"> 
 
    <img src="images/pic.jpg" class="img-responsive" alt=""> 
 
    </div> 
 
    <div class="lower-div"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="content-card"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi possimus alias numquam sunt perspiciatis sint, molestiae aperiam, rerum, deleniti quos. Repellat tenetur, repudiandae quae odit obcaecati libero magnam vero.</p> 
 
     </div> 
 
     <div class="content-card"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p> 
 
     </div> 
 
     <div class="content-card"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> 
 
     <p>Footer</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
</section>

出典

2017-12-13 05:54:05 ashutosh

を作っていただきありがとうございます。 –

あなたはコンテンツdivの高さで私を助けることができます！私はそのdivの項目がフッターdivに触れるときにスクロールを表示したいので、コンテンツdivに特定の高さを与えたくありません。 –

コンテンツクラスでmax-heightとoverflow：autoを使用します。これは機能しなければならない。 – ashutosh

コードsectionでタグが完成しませんでした。また、CSSで変更を加えました。ここに実際の解決策があります。

.main-wrapper{ 
 
padding:15px; 
 
} 
 

 
.header, 
 
.footer{ 
 
    text-align: center; 
 
} 
 

 
.header p, 
 
.footer p{ 
 
    padding:10px; 
 
    background-color: green; 
 
    color: white; 
 
} 
 

 
.content{ 
 
    height: 200px; 
 
    overflow: scroll; 
 
} 
 

 
.content-card{ 
 
    border-bottom: 1px solid black; 
 
} 
 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<section> 
 
<div class="main-wrapper"> 
 
    <div class="upper-div"> 
 
    <img src="images/pic.jpg" class="img-responsive" alt=""> 
 
    </div> 
 
    <div class="lower-div"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="content-card"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi possimus alias numquam sunt perspiciatis sint, molestiae aperiam, rerum, deleniti quos. Repellat tenetur, repudiandae quae odit obcaecati libero magnam vero.</p> 
 
     </div> 
 
     <div class="content-card"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p> 
 
     </div> 
 
     <div class="content-card"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> 
 
     <p>Footer</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
</section>

出典

2017-12-13 05:18:31

固定フッターの作成方法は？

答えて

関連する問題