Еще один запрос в два столбца - PullRequest
Новая
       7

Еще один запрос в два столбца

0 голосов
/ 12 декабря 2011

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

Если кто-нибудь может помочь, я буду вечно благодарен.

Вот что у меня есть ... 

<html>
<head>
<style type="text/css">
body {margin:0px;}
#outer { 
  overflow: hidden;
  width: 100%;
  height:608px; 
  background: #ddd; 
} 

#inner1 { 
  float: right;/* Make this div as wide as its contents */ 
  width:300px;
  padding:10px;
  background: #fdd; 
} 

#inner2 { 
  overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */ 
  padding:10px;
  background: #ddf; 

#divScroll { 
  overflow: scroll; 
  height:600px; 
} 
</style>
</head>
<body>

<div id="outer"> 
<div id="inner1"> 
    inner div 1. Some text... 
</div> 
<div id="inner2">
<div id="divScroll">

    inner div 2... <br />
    inner div 3... <br />
    inner div 2... <br />

.
.
    enough text here to make it scroll !
.
.
    inner div 2... <br />
    inner div 2... <br />
    inner div 2... <br />
    inner div 2... <br />
    </div>
</div> 
</div> 
</body>
</html>

Ответы [ 2 ]

1 голос
/ 12 декабря 2011

Извините, я не очень хорошо понял вопрос. Это то, что вы хотите сделать?: http://jsfiddle.net/6a9bU/2/

0 голосов
/ 13 декабря 2011

Не уверен, если это то, что вы имеете в виду, но я думаю, что вы хотите что-то вроде этого:

http://jsfiddle.net/spacebeers/s8uLG/3/

Вы устанавливаете свой контейнер с переполнением, установленным на скрытый, затем к каждому элементу div добавляете отрицательное поле margin-bottom и равное положительное padding-bottom. 

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>
...