CSS：两根柱子（固定/流体）-相同高度

StackOverflow https://stackoverflow.com/questions/1784841

  •  21-09-2019
  •  | 
  •  

题

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

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

主列将包含不定长度的文本，并且无论内容是什么，我希望左列与主列一样高。没有页眉，没有页脚，只是屏幕一分为二，但左边 必须 填满主要占用的所有空间。没有 JavaScript。

谢谢。

编辑：这个（非常基本的布局）可以完成吗 没有 像背景图像或荒谬的边距值之类的技巧？我正在尝试摆脱被鄙视的表格方法，但到目前为止，我发现仅 CSS 布局总是需要一些技巧，即使是做最简单的事情。

有帮助吗？

解决方案 3

所以基本上“不用技巧就能做到这一点”这个问题的答案是：不。

其他提示

我通常有两个 div：外部的 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;
}

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

<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>

希望这对你有用。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top