1

左の列の幅が固定で、高さが 100% (右の列が何であれ) で、右の列の幅が流動的なページ レイアウトを構築しようとしています。いろいろな方法を試してみたのですが、うまくいかないようです..

これが私のコードです：

<div id="pageHolder">
  <div id="topSection">
    header goes here
  </div>
  <div id="pageContainer">
    <div id="leftColumn">
      <div id="leftHolder">
        left stuff goes here
      </div>
    </div>
    <div id="rightColumn">
      <div id="rightHolder">
        right stuff goes here
      </div>
    </div>
  </div>
  <div id="bottomSection">
    footer goes here
  </div>
</div>

そして私のcssは：

body {
  height: 100%;
}
div#pageHolder {

}
div#topSection {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
div#pageContainer {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
div#leftColumn {
  position: relative;   
  float: left;
  width: 285px;
  height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
div#leftHolder {
  padding: 25px 25px 25px 25px;
  margin: 0px 0px 0px 0px;
}
div#rightColumn {
  position: relative;   
  height: 100%;
  min-height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 285px;
}
div#rightHolder {
  padding: 25px 25px 25px 25px;
  margin: 0px 0px 0px 0px;
}
div#bottomSection {
  clear: both;
}

誰かが私を助けることができれば、それは素晴らしいことです:)

4

3 に答える 3

3

これを試してください：

div#leftColumn {
  position: absolute;   
  float: left;
  width: 285px;
  height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

**編集: 再考して、おそらく maxwidth と maxheight を使用すると、 position: relative を維持したい場合に役立つことがあります。

于 2009-08-20T01:04:53.340 に答える
2

http://css-tricks.com/the-perfect-fluid-width-layout/

「ライブの例」を見ると、これがあなたが求めているものです

于 2009-08-20T01:05:34.700 に答える
1

cssでbody定義を置き換え、高さを追加したいと思いますbody, htmlpageHolder

body, html {
  height: 100%;
}
div#pageHolder {
  height: 100%;
}

内部のコンテンツに関係なく、不要なスクロールバーが表示されるため、かなり面倒です。これはあなたが達成しようとしていることですか？

于 2009-08-20T01:04:14.527 に答える