文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML/CSS:如何让侧边栏和内容相互跟随

问HTML/CSS:如何让侧边栏和内容相互跟随
EN

Stack Overflow用户

提问于 2010-07-07 21:15:30

回答 3查看 20.9K关注 0票数 3

我需要一个侧栏和一个内容区。我想让两个部分的高度相等。因此，如果我想为侧边栏指定背景色，即使侧边栏的内容不像内容部分那么高，它也会跟随内容区域，反之亦然。我只想在纯HTML和CSS中做到这一点，所以没有javascript技巧。

height

sidebar

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2010-07-07 21:17:15

以跨浏览器的方式实现这一点的唯一真正的方法是使用表格。

当内容添加到下面的侧栏单元格中时，它将强制整个行展开，这反过来也将强制contentArea单元格展开。您可以使用css分别设置它们的样式。

<style>
  #sideBar { vertical-align:top;}
  #contentArea { vertical-align:top;}
</style>
<table>
  <tr>
    <td id="sideBar">SideBar</td>
    <td id="contentArea">content area</td>
  </tr>
</table>

票数 1

Stack Overflow用户

发布于 2010-07-07 21:27:21

This excellent article on A List subject从头开始构建这样的布局，还包含一些有趣的链接，指向该主题的其他文章，如Faux Columns (也在ALA上)。

票数 4

Stack Overflow用户

发布于 2012-12-11 05:15:26

基本上，只要将侧边栏的高度设置为100%，它就会跟随父元素的高度。在下面的示例中，它是容器元素。无论高度如何，侧边栏的高度都是100%，因此总是与容器的高度相同。

<div id="wrapper">
  <div id="container">
      <div id="sidebar"></div>
  </div>
</div>

<style>
#wrapper {}
#container {min-height:500px;}  (or whatever you want for the height)
#sidebar {height:100%;}
</style>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3194983

复制

相似问题

问HTML/CSS:如何让侧边栏和内容相互跟随
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS:如何让侧边栏和内容相互跟随EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS:如何让侧边栏和内容相互跟随
EN