用CSS在HTML中设置div的高度

我试图展示一个有两列的表格式页面。我希望最右边的列停靠在页面的右侧,并且此列应具有不同的背景颜色。右侧的内容几乎总是比左侧的内容小。我希望右边的div永远足够高,可以到达它下面一行的分隔符。如何让我的背景颜色填充该空间?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class =“snippet-code”>

  .rightfloat {
  红色;
  background-color:#BBBBBB;
  float:right;
  宽度:200px;
}

。剩下 {
  font-size:20pt;
}

。分隔器 {
  明确:两者;
  宽度:100%;
  border-top:1px纯黑色;
} </代码> 
  <div class =“separator”>
  <div class =“rightfloat”>
    一些非常短的内容。
  </div>
  <div class =“left”>
    有些真的真的真的真的很
    真的非常非常非常大的内容
  </div>
</div>
<div class =“separator”>
  <div class =“rightfloat”>
    一些更短的内容。
  </div>
  <div class =“left”>
    有些真的真的真的真的很
    真的非常非常非常大的内容
  </div>
</div> </代码> 
</div></div>


编辑:我同意这个例子非常类似于表格,实际的表格将是一个不错的选择。但是,我的“真实”页面最终不会像表一样,我只想先掌握这个任务!

此外,出于某种原因,当我在IE7中创建/编辑我的帖子时,代码在预览视图中正确显示,但是当我实际发布消息时,格式将被删除。在Firefox 2中编辑我的帖子似乎奏效了,FWIW。


另一个编辑:是的,我不接受GateKiller的答案。它确实在我的简单页面上很好地工作,但不在我实际较重的页面中。我会调查你们都指向我的一些链接。

0

13 答案

我在我的网站上遇到了同样的问题(无耻的插件)。

我有导航部分“float:right”,页面的主体有一个大约250px的背景图像,右对齐和“repeat-y”。然后,我添加了“明确:两个”的东西。这里是W3Schools和 CSS清除属性

我将清除置于“页面”分类div的底部。我的页面源代码看起来像这样。

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

我希望帮助:)

0
额外

只是想在这里帮忙,所以代码更具可读性 请记住,您可以通过点击顶部的按钮“101010”来插入代码片段。只需输入您的代码,然后突出显示它,然后单击按钮。

这里是一个例子:

<html>
    <body>
    


0
额外

咳咳...

您的问题的简短答案是,您必须将身高和html标记设置为100%的高度,然后将每个div元素的高度设置为100%,以使其成为页面高度的100%。 / p>

实际上,在大多数设计情况下,100%的高度都不起作用 - 这可能很短,但这不是一个好的答案。谷歌“任何列最长”的布局。最好的方法是将左边和右边的cols放入一个包装器 div 中,漂浮左边和右边的cols,然后浮动包装器 - 这使得它伸展到内部容器的高度 - 然后设置背景在外包装上的图像。但要注意浮动元素的任何水平边距,以防万一您获得IE“双重边距浮动错误”。

0
额外
好的,谢谢你polsonby。
额外 作者 Mukul Kant,

试试这个:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>
</div> </div>
0
额外

您的问题的简短答案是,您必须将身高和html标签的高度设置为100%,然后将每个div元素的高度设置为100%,以使100%成为页面的高度。

0
额外

我可以想到2个选项

  1. Use JavaScript to resize the smaller column on page load.
  2. Fake the equal heights by setting the background-color for the column on the container <div/> instead (<div class="separator"/>) with repeat-y
0
额外

我放弃了严格的CSS,并使用了一个小jQuery:

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);
0
额外

2列布局在CSS中工作有点难(至少在CSS3实用之前)。

向左和向右浮动将工作到一个点,但它不会允许您扩展背景。为了使背景保持稳定,您必须实施一种称为“虚拟列”的技术,这基本上意味着您的列本身不会有背景图像。您的2列将包含在父标签内。这个父标签被赋予一个包含你想要的2列颜色的背景图片。使这个背景只有你需要的大(如果它是一个纯色,只能使它高1个像素),并让它重复-y。 AListApart有一个很好的演练,说明如何使它工作。

http://www.alistapart.com/articles/fauxcolumns/

0
额外

Some browsers support CSS tables, so you could create this kind of layout using the various CSS display: table-* values. There's more information on CSS tables in this article (and the book of the same name) by Rachel Andrew: Everything You Know About CSS is Wrong

如果您在旧版浏览器中需要不支持CSS表格的一致布局,则需要做两件事:

  1. Make your "table row" element clear its internal floated elements.

    The simplest way of doing this is to set overflow: hidden which takes care of most browsers, and zoom: 1 to trigger the hasLayout property in older versions of IE.

    There are many other ways of clearing floats, if this approach causes undesirable side effects you should check the question which method of 'clearfix' is best and the article on having layout for other methods.

  2. Balance the height of the two "table cell" elements.

    There are two ways you could approach this. Either you can create the appearance of equal heights by setting a background image on the "table row" element (the faux columns technique) or you can make the heights of the columns match by giving each a large padding and equally large negative margin.

    Faux columns is the simpler approach and works very well when the width of one or both columns is fixed. The other technique copes better with variable width columns (based on percentage or em units) but can cause problems in some browsers if you link directly to content within your columns (e.g. if a column contained <div id="foo"></div> and you linked to #foo)

以下是使用填充/边距技术来平衡列高度的示例。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class =“snippet-code”>

  html,body {
  身高:100%;
}

.row {
  缩放:1; / *在IE中清除内部浮动* /
  溢出:隐藏; / *清除内部浮动* /
}

.right列,
.left-column {
  填充底部:1000em; / *平衡列的高度* /
  margin-bottom:-1000em; / * * /
}

.right-column {
  宽度:20%;
  float:right;
}

.left-column {
  宽度:79%;
  向左飘浮;
} </代码> 
  <div class =“row”>
  <div class =“right-column”>右栏内容</div>
  <div class =“left-column”>左列内容</div>
</div>
<div class =“row”>
  <div class =“right-column”>右栏内容</div>
  <div class =“left-column”>左列内容</div>
</div> </代码> 
</div></div>

这个由Natalie Downe演绎的Barcamp演示可能对于找出如何添加更多列和良好的间距和填充也很有用:同等高度栏目和其他技巧(这也是我第一次了解保证金/填充技巧来平衡专栏高度的地方)

0
额外
为我工作。谢谢 :)
额外 作者 Vivek Sampara,

不需要编写自己的CSS,有一个名为“Bootstrap css”的库,通过在HTML头部分中调用该库,我们可以实现许多样式,下面是一个示例: 如果您想要连续提供两列,则只需执行以下操作:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>
</div> </div>

这里md代表中等设备,您可以使用col-sm-6用于较小的设备,col-xs-6用于额外的小型设备

0
额外

Here's an example of equal-height columns - Equal Height Columns - revisited

You can also check out the idea of "Faux Columns" as well - Faux Columns

不要走桌子路线。如果它不是表格数据,请不要这样对待。这对可访问性和灵活性不利。

0
额外

只需使用css属性 width 就足够了。

这里是一个例子:



0
额外
欢迎来到堆栈溢出!感谢您的发布!请勿在您的帖子中使用签名/标语。您的用户箱计为您的签名,您可以使用您的个人资料发布您喜欢的任何关于您自己的信息。 关于签名/标语的常见问题
额外 作者 Andrew Barber,

这应该适合你:在 htmlbody 元素的css中将高度设置为100%。然后,您可以在 div 中根据需要调整高度。

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 
0
额外