CSS-столбцы Divs Требуется помощь

Question

Я пытаюсь создать макет страницы, где левый столбец имеет фиксированную ширину и высоту 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;
}

Если бы кто-нибудь мог мне помочь, это было бы здорово :) 1009 *

Answer 1

Попробуйте это:

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

** Редактировать: Если подумать, возможно, использование maxwidth и maxheight может помочь вам, если вы хотите сохранить положение: относительное.

Answer 2

http://css -tricks.com / идеальная жидкость ширина верстки /

как я вижу ' живой пример ' это то, что вы просите

Answer 3

Я полагаю, что вы хотите заменить body определение на body, html в вашем CSS, а также добавить высоту к pageHolder

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

Это довольно раздражает, потому что вы получите ненужные полосы прокрутки независимо от содержимого внутри. Это то, что вы пытаетесь достичь?