文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS:流体边栏-流体内容

问CSS:流体边栏-流体内容
EN

Stack Overflow用户

提问于 2009-07-15 23:57:15

回答 2查看 1.2K关注 0票数 1

上面的图片解释了所有的事情。

基本上，我需要一个侧栏div，它的宽度根据它里面的内容扩展，以及一个mainContent，它扩展到窗口的其余宽度。

html

css

xhtml

回答 2

Stack Overflow用户

回答已采纳

发布于 2009-07-16 00:23:38

这似乎可以做到这一点。不过，@stefanw也有一定的道理。侧边栏将扩展到其文本的宽度，这意味着文本不会换行。我想这可能不是你想要的。或者可能是，如果你放在那里的东西没有变化很大，但也没有固定的话？

<html>
<head>
  <style type="text/css">
#overallWrapper div {
  background: #CCC;
  border: 1px solid black;
  padding: 15px;
  height: 100%;
}
#sideBar {
  float: left;
}
  </style>
</head>
<body>
  <div id="overallWrapper">
    <div id="sideBar">
      I need this to expand to the width of this text...
    </div>
    <div id="content">
      This should take the rest of the room, whatever's left...
    </div>
  </div>
</body>
</html>

如果需要，您可以删除overallWrapper。

票数 0

Stack Overflow用户

发布于 2009-07-16 00:29:28

如果你关心左边侧边栏的宽度，你可以将max-width css属性应用于左边的div，以防你的内联内容没有换行。

此外，如果您支持具有最大宽度的ie7，请确保您的文档类型是严格的。

票数 1

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

原文链接：

https://stackoverflow.com/questions/1134725

复制

相似问题

问CSS:流体边栏-流体内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:流体边栏-流体内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:流体边栏-流体内容
EN