Как сделать два пропорциональных столбца в HTML / CSS, где левый столбец следует за пользователем при прокрутке?

Question

Мне нужен макет из двух столбцов, в котором два столбца пропорциональны друг другу по размеру и не будут перекрываться. Левый столбец имеет только немного содержимого в верхней части и должен прокручиваться вниз со страницей (перемещаться вместе со страницей при прокрутке вниз.) В правом столбце будет много данных и не будет полосы прокрутки. , браузер будет прокручивать страницу вниз.

Итак, я хочу объединить два приведенных ниже примера, чтобы при изменении размера шрифта и изменении содержимого столбцы оставались пропорциональными, как в примере 2, но мне также нужно, чтобы содержимое левой стороны следовало за пользователем вниз по экрану. прокручивая их, чтобы увидеть весь столбец 2 (как в примере 1).

Пожалуйста, посмотрите пример здесь, чтобы понять, о чем я говорю:

http://vershok.com/test_layout_20090610.html

Я обновил пример с календарем пользовательского интерфейса JQuery в левом элементе div, чтобы показать, как position: fixed; макеты не изменяют размер правильного столбца (у календаря JQuery есть проблемы, потому что он переполняет его div.)

http://vershok.com/test_layout2_20090610.html

Мне нужен макет из двух столбцов, в котором два столбца пропорциональны друг другу по размеру и не будут перекрываться. Левый столбец имеет только немного содержимого в верхней части и должен прокручиваться вниз со страницей (перемещаться вместе со страницей при прокрутке вниз.) В правом столбце будет много данных и не будет полосы прокрутки. , браузер будет прокручивать страницу вниз.

Answer 1

Если вы используете DIV для разделения страницы, вы можете добиться этого эффекта, например, так:

<div style='position: fixed;width: 20%;'>
  Text for the left column.
  Should scroll down the page
</div>
<div style='float: right; width: 80%;'>
  *insert large content here. including table content if you want.*
</div>

Answer 2

Элемент с position:fixed - это в основном абсолютно позиционированный элемент, расположенный относительно окна браузера.

Это означает, что он удален из потока документа и не повлияет на то, как элементы до или после него расположены (или измерены). Вот почему ваш левый столбец не меняет ширину, когда элемент фиксированной позиции слишком широк.

Вы должны знать, что ie6 не поддерживает position:fixed и по умолчанию возвращается к position:static. ie7 поддерживает position:fixed только если вы используете строгий тип документа.