0

div レイアウトは次のとおりです。

<div id="mainContainer">
  <div id="leftSpacer"></div>
  <div id="Content"></div>
  <div id="rightSpacer"></div>
</div>

私が達成しようとしているのは、mainContent を幅 1000px に設定し、コンテンツに基づいて高さを可変にすることです。mainContent が移動せず、Web サイトがページの中央に表示されるように、左右のスペーサーは表示画面に基づいてサイズを変更する必要があります。この種の動的なサイズ変更を実現する最善の方法は何ですか? ソリューション シードは、ブラウザに依存しません。

4

2 に答える 2

0

次のようにフレックスボックスを使用できます。

html,body{
  margin:0;
  padding: 0;
  height: 100%;
}
#mainContainer {
  width: 100%;
  min-height: 100%;
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -moz-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: row;
  -webkit-box-direction: row;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#rightSpacer,
#leftSpacer{
  background: red;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
#Content {
  width: 1000px;
  background: green;
}

ただし、ie9- はサポートしていません。デモをご覧ください。フレックスボックスについて詳しく知りたい場合は、ここをクリックしてください。

于 2013-06-10T07:35:41.800 に答える
0

以下のスタイルを HTML に適用し、要件を完全に満たしているかどうかを確認します。

#mainContainer{
    width:100%;
    background:green;
    overflow:hidden
}
#Content{
    background:gray;   
    width:1000px;
    float:left;
    margin:0 auto; 

}
#leftSpacer{
    float:left;
    background:red;
}
#rightSpacer{
    float:left;
    background:red;
}
于 2013-06-10T07:18:12.317 に答える