コンテンツnowrapと位置固定フッター

Question

固定フッターdivを持つHTMLページがあります。これは、水平に中央に配置し、ページの下部に配置する必要があります。ページにテキストが多くない場合、私のコードは正常に動作します。テキストがさらにあり、固定フッタdivが画面外に出ると消えます。私はなぜそれが起こっているのか分かりません。

ので、これは正常に動作します：

<div style="border: 1px solid blue; white-space: nowrap;"> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
</div> 
 
<div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;"> 
 
    This is the footer 
 
</div>

しかし、より多くのテキストやフッタが画面から外れるがある場合、それは消えます。どうすればこの問題を解決できますか？私のコンテンツのdivのテキストを折り返してはいけないことに注意してください。

<div style="border: 1px solid blue; white-space: nowrap;"> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
    <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
</div> 
 
<div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;"> 
 
    This is the footer 
 
</div>

Answer 1

<div style="border: 1px solid blue;"> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> 
 
</div> 
 
<div style="border: 1px solid red; text-align: center;"> 
 
This is the footer 
 
</div>