一根 100% 高度的色谱柱分为 3 个部分：2 个固定部分和 1 个流体部分

发布于 2024-12-11 22:08:10 字数 141 浏览 0 评论 0原文

我需要制作一个占据 100% 窗口高度的 div 来创建侧边栏。这很容易。但是有没有办法将该列分成 3 部分，其中第 1 部分和第 3 部分具有固定高度，中间部分会扩展以填充加载时的剩余空间，并且当浏览器仅使用 CSS 调整大小时，而不必求助于 javascript？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

讽刺将军 2024-12-18 22:08:10

如果您在侧边栏中粘贴了三个 div，并且侧边栏的 CSS 位置为“相对”，那么您可以为三个内部 div 设置 CSS，如下所示：

#divTop {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 120px;
}
#divMiddle {
position: absolute;
top: 120px;
bottom: 120px;
left: 0px;
right: 0px;
height: auto;
}
#divBottom {
position: absolute;
bottom: 0px; /* EDIT: corrected from 120px; */
left: 0px;
right: 0px;
height: 120px;
}

If you stick three divs within the sidebar and the sidebar has a CSS position of 'relative' then you can set the CSS for the three inner divs as follows:

#divTop {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 120px;
}
#divMiddle {
position: absolute;
top: 120px;
bottom: 120px;
left: 0px;
right: 0px;
height: auto;
}
#divBottom {
position: absolute;
bottom: 0px; /* EDIT: corrected from 120px; */
left: 0px;
right: 0px;
height: 120px;
}

回复收藏 0 原文

画离情绘悲伤 2024-12-18 22:08:10

我知道你接受了答案。我添加这个以供将来参考。您还可以使用 css display:table 样式执行您想要的操作。 IE7 不支持，但是...也许你不在乎。

使用容器 div，然后使用三个子 div，如下所示：

<div id='container'>
  <div id='col1'> <h1>content for col1</h1> </div>
  <div id='col2'> <h1>content for col2</h1> </div>
  <div id='col3'> <h1>content for col3</h1> </div>
</div>

css 如下所示：

#container {
  display:table;
}
#container > div {
  display:table-cell;
  padding:4px 8px;
}
#col1 {
  width:160px;
  background-color:LightGreen;
}
#col2 {
  background-color:LightBlue;
}

#col3 {
  width:240px;
  background-color:LightPink;
}

http:// jsfiddle.net/CtEya/embedded/result/

I know you accepted an answer. I'm adding this for future reference. You can also do what you want with the css display:table style. Not supported in IE7, but... maybe you don't care.

Use a container div, and then three child divs, like this:

<div id='container'>
  <div id='col1'> <h1>content for col1</h1> </div>
  <div id='col2'> <h1>content for col2</h1> </div>
  <div id='col3'> <h1>content for col3</h1> </div>
</div>

The css looks like this:

#container {
  display:table;
}
#container > div {
  display:table-cell;
  padding:4px 8px;
}
#col1 {
  width:160px;
  background-color:LightGreen;
}
#col2 {
  background-color:LightBlue;
}

#col3 {
  width:240px;
  background-color:LightPink;
}

http://jsfiddle.net/CtEya/embedded/result/

回复收藏 0 原文

~没有更多了~