CSS：流体侧栏 - 流体内容

enter image description here CSS：流体侧栏 - 流体内容

上图中的所有内容均已解释。

基本上，我需要一个侧栏div，其宽度根据其内容和扩展到窗口宽度的其余部分进行扩展。

2009-07-15 RyanScottLewis

这很好。那里有问题吗？或者只是一份工作单？我会回答一个问题，但我不会做你的工作。 – geowa4 2009-07-16 00:01:01

如果侧边栏根据其内容进行扩展，则会扩展到100％的宽度，并且其中包含一些文本行。不是真正的侧栏定义。 – stefanw 2009-07-16 00:08:25

这似乎是这样做的。虽然@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。

来源

2009-07-16 00:23:38 pkaeding

如果您完全担心左侧侧栏的宽度，那么您可以将最大宽度css属性应用于左侧div，以防您不打断您的内联内容。

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

来源

2009-07-16 00:29:27 brack

CSS：流体侧栏 - 流体内容

回答

相关问题