Question

做这件简单事情的最佳方法是什么？

左栏，固定宽度，背景说黄色
主栏，屏幕的其余部分

主列将包含无限长度的文本，并且我希望左列与主要内容一样高，无论内容是什么。没有页眉，没有页脚，只有屏幕分成两部分，但左侧必须填满主要的所有空间。没有javascript。

感谢。

编辑：这个（非常基本的布局）能否完成没有技巧，如背景图片或荒谬的边距值？我正试图从鄙视的表格方法继续前进，但到目前为止，我看到只有CSS布局总是需要一些技巧，甚至做最简单的事情。

Answer 1

我通常有两个div：外部的div包含我希望与主列具有相同高度的侧边栏内容，而内部div将是主列。

-----------------------------
|      -------------------- |
|      |                  | |
|      |                  | |
|      |                  | |
|      -------------------- |
-----------------------------

这样，内部/主要div将外部/侧边栏div强制为与内部/主要部分相同的高度。只需float:right内部/主要div，将外部/侧边栏div设置为width:100%，并指定内部/主要div具有左边距，以允许侧边栏，例如margin-left:20%。

<div class="outer">
  <div class="inner">
    --main content--
  </div>
  --sidebar content--
</div>

更新：抱歉，我的侧边栏内容显示在错误的位置。它应该在下面内部/主要div，以便内部/主要div在浮动时显示在右侧。 CSS示例：

div.outer {
  width: 100%;
}

div.inner {
  margin-left: 20%; /* width of sidebar */
  float: right;
}

Answer 2

所以基本上问题的答案是“这可以不用技巧完成”是：否。

Answer 3

这是一个QUICK模型。使用时，主列会水平填充。如果您已知道左列宽度，则可以设置主列宽。

<html>
<head>
<style>
#leftCol
{
width:350px;
height:100%;
float:left;
background-color:#FFFF33;
}
#mainCol
{
width:53%;
height:100%;
float:left;
background-color:#CC0033;
}
#wrapper
{
width:100%;
}
.clearFix
{
clear:both;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="leftCol">tfgsrrtgrt

</div>
<div id="mainCol">gtrgdrtgthdyhtyhtyhydthtr

</div>
<div class="clearFix"></div>
</div>
</body>
</html>

希望这适合你。

CSS：两列（固定/流体） - 相同高度

4 个答案: