Question

我的页面有标题，左右内容和页脚。我有左侧栏填充第一个屏幕，但是当右侧的内容导致需要滚动条时，左侧栏不会向下延伸。我已经尝试了最小和最大高度并将溢出设置为隐藏，但我似乎无法弄明白。

这是我的CSS：

html {
  height: 100%;
}
body {
  background:#FFF;
  margin:0px;
}   
#container {
  position: relative;
  margin: auto auto;
  width: 100%;
  height:100%;
}
#header {
  height: 55px;
  padding:  0 14px ;
}
#navigation {
 background:#a4c2c2;
 color: #990000;
}
#navigation a {
  font:10px arial;
  color: #285151;
  text-decoration:none;
  letter-spacing:0.1em;
  height:15px;
}   
#navigation a:hover {
  color: #285151;
  background-color: #D9E6E6;
  height: 15px;
  background-position: center center;
  padding-top: 8px;
  padding-right: 7px;
  padding-bottom: 8px;
  padding-left: 7px;
}
#sidebar {
  background:#a4c2c2;
  width:231px;
  font:12px georgia;
  color: #336666;
  line-height:18px;
  float:left;
  position: absolute;
  overflow:hidden;
  z-index:-1;   
  height:100%;
  min-height:auto;
}
#sidebar div {
 height:2000px;
}
#rightside {
  float: left;
  width: 500px;
  height:100%;
  margin-left:231px;
  padding: 10px 0px 0px 25px;
}
#maincontent {
  background:#fff;
  font:11px arial;
  line-height:20px;
  color:#333333;
  padding: 10px 0 0 0;
  text-align:justify;
}
#footer {
  background:#999966;
  z-index: 1;
  position: fixed;
  left:0px;
  bottom:0px;
  width:100%;
  padding-left: 231px;
  font:11px arial;
  line-height:20px;
  color:#333333;
}

和我的HTML：

<html>
<body>
<div id="container">
  <div id="header" class="logo">
  Header Content
  </div>

  <div id="navigation" height="36">
  Navigation Information
  </div>

  <div id="sidebar" height=100%>
  Left side content
  </div>

  <div id="rightside">
  Page Content
  </div>

  <br class="clearfloat" /> 

  <div id="footer">
   Footer information
  </div>
</div>
</body>
</html>

Answer 1

您需要将左右div放在一个容器div中。使用以下内容修改上面的代码，100％可行。

在CSS中添加：

.sidebar {
  background:#a4c2c2;
  width:231px;
  font:12px georgia;
  color: #336666;
  line-height:18px;
  float:left;
  position: absolute;
  /*overflow:hidden;*/
  z-index:-1;   
  /*height:100%;*/
  min-height:auto;
}

评论侧栏和右侧div并添加

<div class="sidebar">
<div class="sidebar">Left side content</div>
<div id="rightside">Page Content</div>
</div>

Answer 2

您需要为侧边栏和内容添加容器。我称之为＆＃34; .content_container＆＃34;：

<div class="content_container">    
<div id="sidebar"> Left side content </div>
<div id="rightside"> Page Content </div>
</div>

这是css：

.content_container {
border:2px solid red;
overflow: auto;
height:100%;
}

这样，当右边的内容变低时，侧边栏的高度就会跟随它。

http://jsfiddle.net/5xko3yen/1/

CSS DIV标记填充第一个视图但不随内容延伸

2 个答案: