1

ページのレイアウトに問題があります。答えは簡単だと思いますし、答えを探したり実験したりするのにかなりの労力を費やしましたが、それを突き止めることができないようです。

ページには、高さが固定されているヘッダーとフッターが必要ですが、ブラウザーウィンドウで水平方向に調整されます。その間に、ヘッダーとフッターの間の使用可能なすべてのスペースを埋めるために水平方向と垂直方向に拡張する必要がある「メイン」divがあります（ただし、ブラウザーウィンドウにスクロールバーを表示することはできません）。'main' div自体には、固定幅の左側の'サイドバー'と、残りのスペースを占める'content'divが必要です。

自分が取り組んでいることを説明する画像を添付しましたが、新規ユーザーとして10人の担当者がいないため、画像を添付できません（「スパム防止メカニズム」のため）。

私はここでフィドルで遊んでいます：http： //jsfiddle.net/pURjN/4/

私はいくつかの指針と方向性を探しています。そのフィドルを自由にいじってください。

ありがとう、
J

4

1 に答える 1

2

絶対配置を使用します。「メイン」divは必ずしも必要ではないようですが、害はありません。

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
}
#sidebar {
    position: absolute;
    top: 75px;
    left: 0;
    bottom: 75px;
    width: 250px;
}
#content {
    position: absolute;
    top: 75px;
    left: 250px;
    right: 0;
    bottom: 75px;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
}

http://jsfiddle.net/gilly3/pURjN/7/

追加の div がなくても同様に機能します: http://jsfiddle.net/gilly3/pURjN/8/

于 2012-06-05T00:28:20.797 に答える