CSS浮动和高度问题

Posted 2023-03-14

【中文标题】CSS浮动和高度问题

【英文标题】：CSS float and height issue

【发布时间】：2011-07-17 07:03:26

【问题描述】：

我正在尝试创建一个两栏网页。两列都有动态高度，但我希望它们都扩展 100% 的页面。

我的意思是如果你有一个页面

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

我希望如您在两列上方看到的那样扩展页面的整个高度。

我现在有

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
</div>

#col1 float: left;
#col2 float: right;

问题是无论我尝试什么，我可以让列增加高度的唯一方法是使用静态数字

#col2 
  float: right;
  height: 100px;

这不起作用，因为内容是动态的。

我尝试过更改浮动并在所有地方放置清除，但无论我做什么，我的页面最终都会看起来像这样

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             +----------+
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

第二列比第一列短。

如何有两个并排的列来扩展页面的高度？

编辑

我已经放弃并尝试了所有建议，但没有结果。我想补充一点。如果有更好的方法可以在没有浮动的情况下做到这一点，我也愿意。比如相对位置。唯一的问题是主 div 必须集中在我似乎无法使用绝对值的主体中。

【问题讨论】：

我仍然对为什么它需要真实全高度感到好奇和迷茫。如果它看起来相同，并且只有在代码中才能看到唯一的区别.. 有什么麻烦？当然真正的全高是灵活的..但你从来没有给出理由这样..？

一列包含一个带有信息的 div，另一列是一个画布，因为画布会增长和缩小所需的 div。我真的不知道为什么仅仅因为我没有给出解释就需要 -1，解释没有给出的事实不应该帮助解决这个问题。相反，我问是因为我知道背景图像的所有这些愚蠢的捷径，这不是我在这种情况下要寻找的，因此我没有使用它。

嗯.. 我不能说什么，因为我没有给你的问题减分.. 我只是想知道为什么有必要真的是全高的。老实说，我还是有点不明白为什么......我的意思是，如果它看起来像它的全高并且背景延伸......应该没有问题了。我认为这里至少应该有几个好的答案。当然，我也代表我自己的答案说话.. :)

1.人们想要解释的原因是因为它决定了如何回答 Q。真正的答案是 - 你想要的东西无法完成，只有解决方法（接受的答案是其中之一，Faux column 是另一个）。使用的方法取决于你想要什么？动态高度？动态宽度？等

【参考方案1】：

我有一个解决方案。实例：http://jsfiddle.net/Qbdab/

HTML：

<div id="header">
</div>
<div class="colmask doublepage">
    <div class="colleft">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>
<div id="footer">
</div>

CSS：

#header 
    background: lightgreen;
    clear:both;
    float:left;
    width:100%;

.colmask 
    clear:both;
    float:left;
    width:100%;            
    overflow:hidden;

.colleft 
    float:left;
    width:100%;
    position:relative;

.col1,.col2
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;


.doublepage 
    background: lightblue;   /* right column background colour */

.doublepage .colleft 
    right:50%; /* right column width */
    background: salmon; /* left column background colour */

.doublepage .col1 
    width:46%; /* left column content width (column width minus left and right padding) */
    left:52%; /* right column width plus left column left padding */

.doublepage .col2 
    width:46%; /* right column content width (column width minus left and right padding) */
    left:56%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */

#footer 
    background: pink;
    clear:both;
    float:left;
    width:100%;

我使用了这个 http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm 并将其精简到基本款，同时还对其进行了着色以使其明显有效。

【参考方案2】：

假设你的页面中有更多的 div 标签。例如，

html:
<div id="wrapper">
  <div id="header">
     <!-- some code here -->
  </div><!-- end of header -->
  <div id="body">
     <div id="left">
        <!-- some code here -->
     </div>
     <div id="right">
        <!-- some code here -->
     </div>
     <div style="clear:both"></div>
  </div><!-- end of body -->
  <div id="footer">
     <!-- some code here -->
  </div>
</div><!-- end of wrapper -->

CSS:
#wrapper
  background:#eee;
  width:970px;
  margin:0px auto;

#wrapper #body
  height:auto;

#wrapper #body #left
  widht:70%;
  float:left;
  border:1px solid black;

#wrapper #body #right
  width:auto;
  float:right;
  border:1px solid black;

嵌套 div 会导致您从其父 div 继承任何值。

【讨论】：

我尝试将页面上每个父元素的高度设置为 auto/100% 没有任何效果

我认为你不应该关心身高。插入数据时会自动设置它们。

同样有用的是，高度是设计不可或缺的一部分。

【参考方案3】：

html:每列添加 class="col"

#col1 
    background:lightyellow;
    float:left;

#col2 
    background:lightred;
    float:right;

.col 
    width:300px;
    min-height:300px;    /* viewport fillsize height */
    height:100%;    /* autofill wrapper height, intend to stetch the shorter shrinked floated bloock */

【讨论】：

没有成功我尝试将类全部设置为一个重要的标签，只是为了安全并且没有结果。

对不起，我弄错了你的情况。如果您只想要这样的演示文稿布局。正如@george 所说，以“Faux”列为例。如果您希望较短列的元素被拉伸为包装器的高度，请考虑 js 分辨率。

【参考方案4】：

您可以在您的 div 之后添加以下代码，以确保它们都清晰；

<br clear="all" />

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
  <br clear="all" />
</div>

如果你想使用 css 类来清除你可以这样做；

<br class="clear" />

br.clear 
     clear:both;
     height:0px;
     width:0px;
     margin:0;
     padding:0;

【讨论】：

前段时间尝试在底部添加清除，但没有成功，但再次尝试使用 br 标签，仍然没有结果

【参考方案5】：

您可以尝试这样做：http://jsfiddle.net/Xtw84/1/（请注意，这是作为另一个问题的示例完成的，因此它与您的结构不完全一样，但我相信您可以弄清楚其余部分。）

这样的东西非常常用。您并没有真正使列全高，而只是通过将所有列包装到包含背景的外部元素中来创造它的错觉。

编辑：幻觉就是你让它成为的样子http://jsfiddle.net/Xtw84/2/

我什么也没做，只是将图像更改为具有这种划分样式的图像。

【讨论】：

我需要两列都是全高的。 jsfiddle.net/austinbv/enpxH 表明两者都不是。抱歉，这行不通

@austinbv 您需要开始像魔术师一样思考。检查我更新的答案。

【参考方案6】：

编辑：仅使用 CSS，没有办法自动调整内容容器的大小 - 它会根据其内容扩展高度 - 除非您绝对定位您的元素（这是您不想要的）。有一个 CSS 解决方法，涉及使用容器作为背景，并为内容清除列：

body 
    margin:0;
    padding:0;
    border:0;
 

.outerContainer 
    position:relative; 
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
    backround-color: RIGHT COLUMN COLOR;

.innerContainer 
    position:relative;
    float:left;
    width:100%;
    right:50%; /* Offsets this by 50% - see explanation */
    background-color: LEFT COLUMN COLOR;

.leftColumn 
    float:left;
    position:relative;
    left:50%;
    width:50%;


.rightColumn 
    float:left;
    position:relative;
    left:50%;
    width:50%;
 

HTML 将被结构化：

div class="outerContainer"
    div class="innerContainer"
       div class="leftColumn"  /div
       div class="rightColumn" /div
    /div
/div

这是它的工作原理。

OuterContainer 的背景将被 innerContainers 背景覆盖 - 我们向左偏移 50%（通过说 right:50%） - 因此，与 outerContainer 宽度相等但向左移动 50% 的 innerContainer 将覆盖左半边外容器。

列用于内容。由于它们位于内部容器内部，而内部容器位于外部容器内部 - 延伸任一列都会将两个容器向下推，因此哪一列的内容更长并不重要 - 它们的大小总是相同的。

按原样，代码需要调整以适应您的外观需求（填充、边距等）。调整整体大小的右/左列宽度（但两者的总和必须小于 100% 才能并排放置）。调整 innerContainers 'right' 属性以左右移动，有效地改变列的大小。

我从 here 中提取了这个，这对我来说很难理解，但对如何设置宽度/左侧定位以考虑填充/边距等有更正式的描述。

另一个（更简单）的解决方案是使用Faux Columns

【讨论】：

不，我需要这些列实际上都是页面的高度，而不仅仅是出现它

您能否详细说明您的原始帖子以解释原因 - 此解决方案解决了所提出的问题。具体来说，除了人造设计无法实现的列外观之外，您还试图实现什么？

问题是如何得到两列等高。不是如何获得看起来相等的两列。您的解决方案仅在较长列的边缘放置了一个假列分隔器，使其看起来第二列也到了底部。如果说他们有不同的背景，这是行不通的。

背景由backround-image决定——左右半边可以根据需要为不同的图案/颜色；因此，如果只有每列的背景颜色/图像需要具有相同的高度，则此解决方案有效。如果你需要，比如说，右栏有一堆空白，然后有一个页脚，它不会。这就是我所指的。我认为还有另一种方式...会更新响应。