Question

经过几个小时的摆弄，我以为我会在这里试试运气。我正在开发一个网站设计，它有一个非常基本的设置，它由一个标题和两列组成，它们有自己的滚动条。这要求它们的位置是绝对的，并且要设置最高值，最低值为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

Answer 1

这就是我要解决的问题：

#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清除浮动：两者;

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

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

希望它有所帮助！

css / header将两个（绝对定位的）拉伸列向下推

1 个答案: