私が開発している Web サイトのページ レイアウトは次のようになります。
-------------------------------------Top Bar-------------------------------------
| |
---------------------------------------------------------------------------------
--------Content (Has a dark filter that goes over the main background image)-----
------------ Main Content---------------------------|-------------SideBar--------
| | |
| | |
| | |
| | |
| | |
| | |
| | |
---------------------------------------------------------------------------------
私のページの は通常、デザインの目的で暗いフィルターを適用する必要がある写真です。そこで、その目的を果たす .content クラスを作成し、すべて (トップ バーを除く) をその中に入れます。
私が抱えている問題は、.main-content コンテナー内のコンテンツがページの高さを超えると、フィルターがページの下部に移動しないことです。body タグと html タグだけでなく、.content の高さも 100% にしています。
html {
font-size: 16px;
height:100%;
overflow:auto;
}
body {
font-size: 62.5%;
/*10px = 1em*/
line-height: 1.4;
width:100%;
height: 100%;
min-height: 100%;
overflow: auto;
}
.top-bar {
width:100%;
height:58px;
position:fixed;
top:0px;
z-index: 5;
}
.top-bar.user {
background-color:rgba(0, 0, 0, 1);
font-size: 1.2em;
}
.content {
display: block;
margin-top: 58px;
/* = top bar height*/
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.main-content {
float: left;
width: 75%;
height: 100%;
}
.sidebar {
position: fixed;
right: 0;
width: 25%;
height: 100%;
}
ここで問題を作成しようとしました: http://jsfiddle.net/apGgd/3/
テーブルを拡大すると、フィルター (灰色の背景) がそれに沿っていないことがわかりますか。ただし、.content から「height:100%」を削除すると、問題はなくなります。