中央に .container と .content div がある固定ヘッダー/フッター レイアウトを使用していますが、何らかの理由で .container に空白が多すぎて、段落が 2 つしかないときにスクロールバーが表示されます。のテキストの.content div.
100% ヘッダーを追加する前に、固定フッターが機能していました。私のマークアップが悪いのか、それが理由なのか、「固定フッター」ハックがクラスの 1 つと競合しているのか、完全にはわかりません。
実際の例: http://jsfiddle.net/A9vVX/7/embedded/result/
ソース: http://jsfiddle.net/A9vVX/7/
これを修正する解決策を知っている人はいますか?フォークしてください。ありがとうございました。
必要に応じて調整できる.containerデフォルト値を設定しています。min-heightフッターはその下に貼り付けます。
このフィドルはあなたの問題を解決しますか: http://jsfiddle.net/jofrystanto/A9vVX/17/
max-height:100%の代わりにコンテナを使用する必要がありますmin-height:100%。このフィドルをチェックしてください
私はあなたを正しく理解していませんでしたが、次のようなものが欲しいと思います:
はいの場合、コードは次のとおりです。
HTML:
<!doctype HTML>
<html lan="en">
<head>
<meta charset="utf-8">
<title>
Home , MySite.com
</title>
</head>
<body>
<div id="Head-Wrap">
<span id="Logo">
<img src="logo.jpg" width="250" height="300" alt="Logo" />
</span>
<span class="header" >
<ul class="Nav">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#"> Testimonials</a></li>
<li><a href="#">Contact US</a></li>
</ul>
</span>
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
</div>
<div id="footer">
The Fixed Footer
</div>
</body>
</html>
CSS:
#Head-Wrap {
display:block;
position:absolute;
width:100%;
top:0px;
left:0px;
position:fixed;
background-color:white;
}
.header .Nav{
display: block;
background-color: transparent;
height: 45px;
margin: 0px auto;
padding: 0px;
position: relative;
width: 960px;
}
.header .Nav li{
display: inline;
margin: 0 0 0 0;
position: relative;
width: 110px;
list-style: none;
padding: 0px 0px 0px 0px;
}
.header .Nav li a{
text-decoration: none;
margin: 0px auto;
}
.container {
background-color:white;
position:absolute;
left:0px;
margin:0px;
padding:0px;
top:350px;
position:fixed;
height:445px;
overflow:scroll;
}
#footer {
position:absolute;
left:0px;
width:100%;
top:100%;
height:100px;
margin-top:-101px;
margin-left:-1px;
padding:0px;
background-color:white;
}
フィドル:
全画面表示：
http://jsfiddle.net/a3Qsf/6/embedded/result/
ソース：
HTML ソース ドキュメントをダウンロードします。
https://www.dropbox.com/s/qw0i310f2bdmuv8/Stackoveflow.html
google chrome 、 Firefox 、 IE および中解像度と高解像度でテストしてください。