Question

我在google上搜索过很多页面，但我似乎无法找到一个有流畅内容（宽度为100％）的页面的好例子，并且右边有一个带有固定宽度和流体的侧边栏高度（侧边栏所需空间的100％）。

这在CSS中是否可行？

视觉上页面看起来像这样。

C =内容 S =侧栏

cccccccccccccc ssssssss
ccccccccccccc ssssssss
ccccccccccccc ssssssss
ccccccccccccccccccccccc
ccccccccccccccccccccccc
ccccccccccccccccccccccc

上面的示例类似于文本中图像的对齐方式。

提前致谢！

链接到原始小提琴代码：jsfiddle.net/uYTht/2

链接到已解决的小提琴代码（由乔治改编）：jsfiddle.net/uYTht/18

Answer 1

更新

根据您的评论，内容似乎也会包含在“post”div中，其中会有多个。这稍微改变了一些事情 - 它需要理解块元素和内联元素之间的区别。基本上，你需要你的“post”div具有内联格式 - 这将允许每条线被分成可以具有不同宽度的单个元素（例如，侧边栏旁边的短宽度，侧边栏下方的较宽宽度）。

在你的jsfiddle链接中，你试图将帖子浮动到左边，这会强制元素显示：block;因此整个元素被包裹在一个盒子中（而不是逐行“盒子”），它只能在宽度上。如果宽度太宽，它将没有空间坐在侧边栏旁边，并且位于它的下方。

您还需要一个clearfix property来确保您的容器正确展开。当我最后检查时，该框正在崩溃。

您的样式表包括：

....
#content {display:block; width:100%;}
#sidebar {float:right;width:200px;}

.post {display:inline;}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
   visibility: hidden;}
....

侧边栏宽度可以设置为您喜欢的任何颜色。

然后你的html部分包括：

...
<div id="content" class="clearfix">
    <div id="sidebar">
        All Sidebar content here
    </div>
    <div class="post">
        Content content content...
    </div>
    <div class="post">
        Content content content...
    </div>


</div>
...

W3schools有succint explanation of floats。

Answer 2

以下是您的工作示例：

您的HTML：

<div id="content"> 
<p>This design uses a defined body height of 100% which allows setting the contained left and 
right divs at 100% height.</p> 
</div> 

<div id="sidebar"> 
<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div>

你的CSS：

body { 
margin:0; 
padding:0; 
height:100%; /* this is the key! */ 
} 

#sidebar { 
position:absolute; 
right:0; 
top:0; 
padding:0; 
width:200px; 
height:100%; /* works only if parent container is assigned a height value */ 
color:#333; 
background:#eaeaea; 
border:1px solid #333; 
} 

#content { margin-right: 200px; }

带有固定侧边栏的CSS流体内容（侧边栏需要固定高度）

2 个答案: