用CSS在HTML中设置div的高度

ysunt 发布于 2018-03-04 css 最后更新 2018-03-04 01:06 586 浏览

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

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}
.left {
  font-size: 20pt;
}
.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

编辑:我同意这个例子非常类似于表格,实际的表格将是一个不错的选择。但是,我的“真实”页面最终不会像表一样,我只想先掌握这个任务! 此外,出于某种原因,当我在IE7中创建/编辑我的帖子时,代码在预览视图中正确显示,但是当我实际发布消息时,格式将被删除。在Firefox 2中编辑我的帖子似乎奏效了,FWIW。
另一个编辑:是的,我不接受GateKiller的答案。它确实在我的简单页面上很好地工作,但不在我实际较重的页面中。我会调查你们都指向我的一些链接。
已邀请:

ut_et

赞同来自:

我在我的网站上遇到了同样的问题(shameless plug)。 我有导航部分“float:right”,页面的主体有一个大约250px的背景图像,右对齐和“repeat-y”。然后,我添加了“明确:两个”的东西。这里是W3Schools和CSS clear property。 我将清除置于“页面”分类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)
我希望帮助:)

iut

赞同来自:

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

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }
.left {
            font-size: 20pt;
        }
.separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

ysequi

赞同来自:

试试这个:

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>

ket

赞同来自:

以下是等高栏的示例 - Equal Height Columns - revisited 您还可以查看“虚拟列”的想法 - Faux Columns 不要走桌子路线。如果它不是表格数据,请不要这样对待它。这对可访问性和灵活性不利。

ysequi

赞同来自:

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

dsed

赞同来自:

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

veos

赞同来自:

咳咳...

The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
实际上,在大多数设计情况下,100%的高度都不起作用 - 这可能很短,但这不是一个好的答案。谷歌“任何列最长”的布局。最好的方法是将左边和右边的cols放在一个包装器div的内部,漂浮左边和右边的cols,然后漂浮包装 - 这会使其延伸到内部容器的高度 - 然后在外部包装上设置背景图像。但要注意浮动元素的任何水平边距,以防万一您获得IE“双重边距浮动错误”。

somnis

赞同来自:

我可以想到2个选项

  1. 在页面加载时使用javascript调整较小的列。
  2. 通过为容器<div/>上的列设置background-color来代替(<div class="separator"/>)和repeat-y来伪造相等的高度

uculpa

赞同来自:

我放弃了严格的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);

gnihil

赞同来自:

某些浏览器支持CSS表格,因此您可以使用各种CSS display: table-*值创建这种布局。本文(以及同名书籍)中有关于CSS表格的更多信息由Rachel Andrew提供:Everything You Know About CSS is Wrong 如果您在旧版浏览器中需要不支持CSS表格的一致布局,则需要做两件事:

  1. 使您的“表格行”元素清除其内部浮动元素。 这样做的最简单方法是设置overflow: hidden,它负责处理大多数浏览器,zoom: 1用于触发旧版IE中的hasLayout属性。 清除浮游物有很多其他方法,如果此方法导致不良副作用,则应检查which method of 'clearfix' is best问题和其他方法的文章on having layout
  2. 平衡两个“表格单元格”元素的高度。 有两种方法可以解决这个问题。您可以通过在“表格行”元素(faux columns technique)上设置背景图像来创建相等高度的外观,或者通过给每个大小的填充和同样大的负边距来使列的高度匹配。 虚列是更简单的方法,并且在一列或两列的宽度固定时工作良好。另一种技术可以更好地应对可变宽度列(基于百分比或em单位),但如果您直接链接到列中的内容(例如,列包含<div id="foo"></div>并链接到#foo),则会在某些浏览器中导致问题。
以下是使用填充/边距技术来平衡列高度的示例。
html, body {
  height: 100%;
}
.row {
  zoom: 1;          /* Clear internal floats in IE */
  overflow: hidden; /* Clear internal floats */
}
.right-column,
.left-column {
  padding-bottom: 1000em;  /* Balance the heights of the columns */
  margin-bottom: -1000em;  /*                                    */
}
.right-column {
  width: 20%;
  float: right;
}
.left-column {
  width: 79%;
  float: left;
}
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
这个由Natalie Downe演示的Barcamp演示可能对于如何添加更多列和更好的间距和填充也很有用:Equal Height Columns and other tricks(这也是我第一次了解到用于平衡列高度的边距/填充技巧的地方)

datque

赞同来自:

只需使用css属性width即可。 这里是一个例子:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>

gnihil

赞同来自:

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

html {
    height: 100%;
}
body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 

zamet

赞同来自:

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

<div class="row">
  <div class="col-md-6"></div>
  <div class="col-md-6"></div>
</div>
这里md代表中等设备,您可以使用col-sm-6用于较小的设备,col-xs-6用于额外的小型设备