css / header толкает два (абсолютно позиционированных) растянутых столбца вниз - PullRequest
Новая
       7

css / header толкает два (абсолютно позиционированных) растянутых столбца вниз

0 голосов
/ 16 сентября 2009

После нескольких часов возни я подумал, что мне здесь повезет. Я работаю над дизайном веб-сайта, который имеет довольно простую настройку, он состоит из заголовка и двух столбцов, которые имеют свои собственные полосы прокрутки. Это требует, чтобы их позиция была абсолютной, а верхнее значение было установлено, а нижнее значение - 0px. Это, конечно, не позволяет им находиться в нормальном потоке документов, и поэтому они не могут быть перенесены в столбец заголовка.

Любые идеи о том, как добиться этого только с помощью css, приветствуются, это кажется таким простым!

С уважением, Тайс.

Код: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testcase</title>

<style type="text/css">

body {
    margin: 0;
    padding: 0;
}

#header {
    background-color: #c8ffff;

}

#lr_container {
    position: absolute;
    top: 250px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#leftcol {
    background-color: #ffdcff;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 200px;
    overflow-y:scroll;
    overflow-x:hidden;
}

#rightcol {
    background-color: #ffffd1;
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right: 0px;
    overflow-y:scroll;
    overflow-x:hidden;
}



</style>

</head>

<body>

<div id="header">
variable amount of content, needs to stretch in height and push the pink and yellow kids downwards<br/><br/>!<br/>!<br/><br/>!<br/>!<br/><br/>!<br/>!<br/><br/>!<br/>!
</div>

<div id="lr_container">

    <div id="leftcol">

    has a fixed width, stretches to the bottom of window<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>
    aa<br/><br/>

    </div>

    <div id="rightcol">
    stretches to the right and stretches to the bottom of window<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    bb<br/><br/>
    </div>

</div>


</body>
</html>

http://www.thingsinprogress.net/test.html

1 Ответ

0 голосов
/ 17 сентября 2009

Вот как бы я решил это: 

#leftcol {
  background-color:#FFDCFF;
  float:left;
  height:200px;
  left:0;
  overflow-x:hidden;
  overflow-y:scroll;
  position:relative;
  top:0;
}
#rightcol {
  background-color:#FFFFD1;
  float:left;
  height:200px;
  left:200px;
  overflow-x:hidden;
  overflow-y:scroll;
  position:relative;
  right:0;
  top:0;
}

Теперь обе колонки, leftcol и rightcol, будут выталкиваться вниз, если содержимое увеличивается. Вы можете очистить поплавок с помощью clear: both; 

<div id="leftcol">col1</div>
<div id="rightcol">col2</div>

<div style="clear: both;"></div>
<div id="bottom">bottom</div>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...