-2

ヘッダー、フッター、および 3 列 (中央/左/右) の中央セクションを含むクロス ブラウザーCSS レイアウト (IE7+)の CSS コードと HTML が必要です。MAIN (図を参照) の幅は柔軟に、両方のサイドバーの幅は固定 (例: 200px) にしたいです。ウィンドウを縮小したときにサイドバーが折りたたまれないようにします。

MAIN DIV の最小幅は 800px としましょう。

すべての要素には流動的な高さが必要です。

ここに画像の説明を入力

ありがとう

4

3 に答える 3

1

アコーディオンセンターのこのフィドルをチェックしてくださいhttp://jsfiddle.net/PduXc/7/

完全な例については、ここをクリックしてくださいhttp://jsfiddle.net/PduXc/14/

body
{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.sidebarleft
{
    width: 100px;
    height: 350px;
    background: red;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 7;
}

.sidebarright
{
    width: 100px;
    height: 350px;
    background: red;
    right: 0;
    top: 0;
    position: absolute;
    z-index: 6;
}
.main
{
    width: 100%;
    height: 350px;
    background: green;
    position: absolute;
    z-index: 5;
}
于 2013-08-10T15:25:42.870 に答える
1

ここでは、開始するのに役立つものを示します (基本的には、すべての作業を当社に任せたいようです)。

「メイン」と「サイドバー」をラッピング div でラップし、この div に次のスタイルを与えます。

.wrapper
{
    margin: auto;
    position: absolute;
    top: 50px; /* Leave 50 pixels for header */
    left: 0; 
    bottom: 0; 
    right: 30px; /* Leave 30 pixels for footer */
}

その後、内側の要素 { height: 100% } を指定すると機能します。

多分このリンクもあなたを助けるでしょう: http://codepen.io/shshaw/full/gEiDt

于 2013-08-10T15:00:52.290 に答える
0

これが役立つかどうかは完全にはわかりませんが、最初に、ヘッダーとフッターを画面の 100% 全幅にしたいですか?

これを試して：

html:

<body>
    <div id="header"></div>
    <div id="sidebarA"></div>
    <div id="main"></div>
    <div id="sidebarB"></div>
    <div id="footer"></div>
</body>

CSS:

#header {
  width: 100%;
  height: 200px;
  padding: 0;
  margin: 0 auto;
  background: #333; /*--Give it some color ;) --*/
  border-bottom: 2px solid #444;
}
#sidebarA {
  width: 200px;
  height: 800px;
  padding: 0;
  margin: 0;
  background: blue;
  float: left;
}
#main {
  width: 800px;
  height: 800px;
  padding: 0;
  margin: 0 auto;
  background: purple;
}
#sidebarB {
  width: 200px;
  height: 800px;
  padding: 0;
  margin: 0;
  background: blue;
  float: right;
}
#footer {
  width: 100%;
  height: 200px;
  padding: 0;
  margin: 0 auto;
  background: #333;
  border-top: 2px solid #444;
}

もちろん、すべてを好みに合わせて簡単にカスタマイズできます ;) 試してみて、気に入るかどうかを確認してください。

于 2013-08-10T11:41:36.550 に答える