1. ホーム
  2. 質問と答え
  3. なぜ私のフッタはページの下部に留まらないのですか？

なぜ私のフッタはページの下部に留まらないのですか？

2017-11-20 8 views
-1

「最新の記事が3x2グリッドになっている」ページの下部にフッターが表示されないのはなぜですか？私はどこに問題があるのか​​分からないので、ここに私のHTMLとCSSをすべて載せました。私は、問題はおそらくどこかここで "containerMedium" と "最新の" クラスだと思いますなぜ私のフッタはページの下部に留まらないのですか？

<html> 
<head> 
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/> 
    <title></title> 
</head> 
<body> 
    <div id="container"> 
    <header> 
    </header> 
    <div id="containerLarge"> 
     <h1 class="heading"> 
     </h1> 
     <article id="featured"> 
     <div class="button"> 
     </div> 
     </article> 
     <h1 class="heading"> 
     </h1> 
     <div class="containerMedium"> 
     <article class="latest"> 
     </article> 
     <article class="latest"> 
     </article> 
     <article class="latest"> 
     </article> 
     <article class="latest"> 
     </article> 
     <article class="latest"> 
     </article> 
     <article class="latest"> 
     </article> 
     </div> 
    </div> 
    <footer> 
    </footer> 
    </div> 
</body> 
</html>

：

は、ここに私のHTMLです。あなたの助けのための

/*CSS RESET*/ 

html, body, div, span, 
h1, h2, h3, h4, h5, h6, 
p, a, img, ol, ul, li, 
table, tbody, tfoot, thead, tr, th, td, 
embed, footer, header, nav{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

/*CSS RESET*/ 

html, body{ 
    height:100%; 
} 

#container{ 
    position: relative; 
    height: 100%; 
    min-height: 100%; 
    background-color: tomato; 
} 

header{ 
    height: 100px; 
    width: 100%; 
    background-color: slateblue; 
} 

#containerLarge{ 
    padding-bottom: 100px; /*Footer Height*/ 
    height: 75%; 
    width:100%; 
    background-color: white; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
} 

.heading{ 
    height: 50px; 
    width: 100%; 
    background-color: pink; 
} 

#featured{ 
    margin-left: auto; 
    margin-right: auto; 
    text-align: right; 
    height: 300px; 
    width: 600px; 
    background-color: royalblue; 
} 

.button{ 
    display: inline-block; 
    margin-right: 30px; 
    margin-top: 220px; 
    height: 50px; 
    width:200px; 
    background-color: gold; 
    border-radius: 25px; 
} 

.containerMedium{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    height: 600px; 
    width: 50%; 
    background-color: crimson; 
} 

.latest{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 300px; 
    width: 200px; 
    background-color: springgreen; 
} 

footer{ 
    position: absolute; 
    bottom: 0px; 
    height: 100px; 
    width: 100%; 
    background-color: deeppink; 
}

ありがとう：ここ

は私のCSSです！

Josh

出典

2017-11-20 Josh Harry

答えて

0

カップルのもの。 1）あなたのcontainerlarge divには、footerが含まれています。それを取り除く必要はありません。 2）フッターは絶対的な位置付けをしていますが、要素の上にオーバーレイさせる原因となる相対的なコンテナはありません。任意の位置プロパティは、ドキュメントの通常のフローを完全に無視します。あなたのコードを更新しました。

HTML

/*CSS RESET*/ 
 

 
html, body, div, span, 
 
h1, h2, h3, h4, h5, h6, 
 
p, a, img, ol, ul, li, 
 
table, tbody, tfoot, thead, tr, th, td, 
 
embed, footer, header, nav{ 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 

 
/*CSS RESET*/ 
 

 
html, body{ 
 
    height:100%; 
 
} 
 

 
#container{ 
 
    position: relative; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    background-color: tomato; 
 
} 
 

 
header{ 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: slateblue; 
 
} 
 

 
#containerLarge{ 
 
    padding-bottom: 100px; /*Footer Height*/ 
 
    width:100%; 
 
    background-color: white; 
 
    border-top-left-radius: 15px; 
 
    border-top-right-radius: 15px; 
 
} 
 

 
.heading{ 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: pink; 
 
} 
 

 
#featured{ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: right; 
 
    height: 300px; 
 
    width: 600px; 
 
    background-color: royalblue; 
 
} 
 

 
.button{ 
 
    display: inline-block; 
 
    margin-right: 30px; 
 
    margin-top: 220px; 
 
    height: 50px; 
 
    width:200px; 
 
    background-color: gold; 
 
    border-radius: 25px; 
 
} 
 

 
.containerMedium{ 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    width: 50%; 
 
    background-color: crimson; 
 
} 
 

 
.latest{ 
 
    display: inline-block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 300px; 
 
    width: 200px; 
 
    background-color: springgreen; 
 
} 
 

 
footer{ 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: deeppink; 
 
}
<html> 
 
<head> 
 
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div id="container"> 
 
    <header> 
 
    </header> 
 
    <div id="containerLarge"> 
 
     <h1 class="heading"> 
 
     </h1> 
 
     <article id="featured"> 
 
     <div class="button"> 
 
     </div> 
 
     </article> 
 
     <h1 class="heading"> 
 
     </h1> 
 
     <div class="containerMedium"> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     </div> 
 
    </div> 
 
    <footer> 
 
    </footer> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-11-20 23:00:13 Jorden1337

0

それはすべてのためにあなたの内側の要素の高さです。 100％の高さは、コンテナと記事要素のピクセルの高さをレンダリングする前にブラウザで計算され、スクリーンの実際の100％の高さよりも大きくなります。

id = "container"（正確には「コンテナ」の下）divの外に移動し、フッターのCSSの絶対位置を削除すると正常に動作します。

出典

2017-11-20 23:02:11 Trueman

0

あなたは、ブラウザ画面の下部にあなたのfooterをしたいANそれがその後、フッターのCSSがあり、そこに滞在する必要がある場合：あなたのfooterをしたい場合は、単にページの一番下に

footer{ 
position: fixed; /* Instead of 'absolute' */ 
bottom: 0px; 
height: 100px; 
width: 100%; 
background-color: deeppink; 
}

、その後、footerのためのCSSは次のようにされています固定footerで

footer { 
height: 100px; 
width: 100%; 
background-color: deeppink; 
}

それは次のようになります。

#container{ 
 
    position: relative; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    background-color: tomato; 
 
} 
 

 
header{ 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: slateblue; 
 
} 
 

 
#containerLarge{ 
 
    padding-bottom: 100px; /*Footer Height*/ 
 
    height: 75%; 
 
    width:100%; 
 
    background-color: white; 
 
    border-top-left-radius: 15px; 
 
    border-top-right-radius: 15px; 
 
} 
 

 
.heading{ 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: pink; 
 
} 
 

 
.containerMedium{ 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    height: 600px; 
 
    width: 50%; 
 
    background-color: crimson; 
 
} 
 

 
.latest{ 
 
    display: inline-block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 300px; 
 
    width: 200px; 
 
    background-color: springgreen; 
 
} 
 

 
footer{ 
 
    position: fixed; 
 
    bottom: 0px; 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: deeppink; 
 
}
<div id="container"> 
 
    <header> 
 
    This is the header 
 
    </header> 
 
    <div id="containerLarge"> 
 
     <h1 class="heading"> 
 
     Content Start 
 
     </h1> 
 
     <div class="containerMedium"> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     <article class="latest"> 
 
     </article> 
 
     </div> 
 
    </div> 
 
    <footer> 
 
    Fixed footer 
 
    </footer> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-11-20 23:08:09

関連する問題

 関連する問題