使用 CSS 在 HTML 中设置 div 的高度

Question

提问by Chris Farmer

I am trying to lay out a table-like page with two columns. I want the rightmost column to dock to the right of the page, and this column should have a distinct background color. The content in the right side is almost always going to be smaller than that on the left. I would like the div on the right to always be tall enough to reach the separator for the row below it. How can I make my background color fill that space?

我正在尝试布置一个带有两列的类似表格的页面。我希望最右边的列停靠在页面的右侧，并且该列应该具有不同的背景颜色。右侧的内容几乎总是比左侧的要小。我希望右侧的 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>

Edit: I agree that this example is very table-like and an actual table would be a fine choice. But my "real" page will eventually be less table-like, and I'd just like to first master this task!

编辑：我同意这个例子非常像表格，实际的表格将是一个不错的选择。但是我的“真实”页面最终将不那么像表格，我只想先掌握这项任务！

Also, for some reason, when I create/edit my posts in IE7, the code shows up correctly in the preview view, but when I actually post the message, the formatting gets removed. Editing my post in Firefox 2 seems to have worked, FWIW.

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

Another edit: Yeah, I unaccepted GateKiller's answer. It does indeed work nicely on my simple page, but not in my actual heavier page. I'll investigate some of the links y'all have pointed me to.

另一个编辑：是的，我不接受 GateKiller 的回答。它确实在我的简单页面上很好地工作，但在我实际较重的页面上却没有。我会调查你们给我指出的一些链接。

Answer 1

采纳答案by Polsonby

Ahem...

咳咳...

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% 的高度设置为 body 和 html 标记，然后将每个要使页面高度 100% 的 div 元素的高度设置为 100%。

Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".

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

Answer 2

回答by GateKiller

Give this a try:

试试这个：

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>

Answer 3

回答by georgebrock

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 表格，因此您可以使用各种 CSSdisplay: table-*值创建这种布局。Rachel Andrew 撰写的这篇文章（以及同名书籍）中提供了有关 CSS 表的更多信息：你所知道的关于 CSS 的一切都是错误的

If you need a consistent layout in older browsers that don't support CSS tables, you need to do two things:

如果您需要在不支持 CSS 表格的旧浏览器中保持一致的布局，您需要做两件事：

Make your "table row" element clear its internal floated elements.
The simplest way of doing this is to set overflow: hiddenwhich takes care of most browsers, and zoom: 1to trigger the hasLayoutproperty 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 bestand the article on having layoutfor other methods.
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)

使您的“表格行”元素清除其内部浮动元素。
最简单的方法是设置overflow: hidden哪个负责大多数浏览器，并在旧版本的 IE 中zoom: 1触发该hasLayout属性。
还有许多其他方法可以清除浮动，如果这种方法导致不良副作用，您应该检查哪种“clearfix”方法最好的问题以及有关其他方法布局的文章。
平衡两个“表格单元格”元素的高度。
有两种方法可以解决这个问题。您可以通过在“表格行”元素上设置背景图像（人造列技术）来创建等高的外观，或者您可以通过为每个列提供大的填充和同样大的负边距来使列的高度匹配。
假列是更简单的方法，当一列或两列的宽度固定时效果很好。另一种技术可以更好地处理可变宽度的列（基于百分比或 em 单位），但如果您直接链接到列中的内容（例如，如果包含一个列<div id="foo"></div>并且您链接到#foo），则可能会在某些浏览器中导致问题

Here's an example using the padding/margin technique to balance the height of the columns.

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

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>

This Barcamp demo by Natalie Downe may also be useful when figuring out how to add additional columns and nice spacing and padding: Equal Height Columns and other tricks(it's also where I first learnt about the margin/padding trick to balance column heights)

Natalie Downe 的这个 Barcamp 演示在弄清楚如何添加额外的列以及良好的间距和填充时也可能很有用：等高列和其他技巧（这也是我第一次了解用于平衡列高度的边距/填充技巧的地方）

Answer 4

回答by mxmissile

I gave up on strictly CSS and used a little jquery:

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

Answer 5

回答by Rich Reuter

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

您还可以查看“Faux Columns”的想法 - Faux Columns

Don't go the table route. If it's not tabular data, don't treat it as such. It's bad for accessibility and flexibility.

不要走餐桌路线。如果它不是表格数据，请不要将其视为表格数据。这对可访问性和灵活性不利。

Answer 6

回答by Teifion

I had the same problem on my site (shameless plug).

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

I had the nav section "float: right" and the main body of the page has a background image about 250px across aligned to the right and "repeat-y". I then added something with "clear: both" to it. Here is the W3Schools and the CSS clear property.

我有导航部分“浮动：右”，页面主体有一个大约 250 像素的背景图像，向右对齐并“重复-y”。然后我添加了一些带有“clear: both”的东西。这是 W3Schools 和CSS clear 属性。

I placed the clear at the bottom of the "page" classed div. My page source looks something like this.

我将清除放在“页面”分类 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)

I hope that helps :)

我希望有帮助:)

Answer 7

回答by pragadeesh mahendran

No need to write own css, there is an library called "Bootstrap css" by calling that in your HTML head section, we can achieve many stylings,Here is an example: If you want to provide two column in a row, you can simply do the following:

不需要自己写css，有一个叫做“Bootstrap css”的库，通过在你的HTML head部分调用它，我们可以实现很多样式，这里是一个例子：如果你想连续提供两列，你可以简单地请执行下列操作：

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

Here md stands for medium device,,you can use col-sm-6 for smaller devices and col-xs-6 for extra small devices

这里 md 代表中型设备，你可以使用 col-sm-6 代表较小的设备，col-xs-6 代表超小型设备

Answer 8

回答by aspirew

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

Answer 9

回答by user2194160

It's enough to just use the css property widthto do so.

仅使用 css 属性width就足够了。

Here is an example:

下面是一个例子：

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

Answer 10

回答by Palm Int Srv

This should work for you: Set the height to 100% in your css for the htmland bodyelements. You can then adjust the height to your needs in the div.

这应该对您有用：在 css 中将html和body元素的高度设置为 100% 。然后，您可以在div.

html {
    height: 100%;
}

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

使用 CSS 在 HTML 中设置 div 的高度

提问by Chris Farmer

采纳答案by Polsonby

回答by GateKiller

回答by georgebrock

回答by mxmissile

回答by Rich Reuter

回答by Teifion

回答by pragadeesh mahendran

回答by aspirew

回答by user2194160

回答by Palm Int Srv

相关推荐

最近更新

标签

使用 CSS 在 HTML 中设置 div 的高度

提问by Chris Farmer

采纳答案by Polsonby

回答by GateKiller

回答by georgebrock

回答by mxmissile

回答by Rich Reuter

回答by Teifion

回答by pragadeesh mahendran

回答by aspirew

回答by user2194160

回答by Palm Int Srv

相关推荐

C++ 如何更改代码::块中的文本颜色和控制台颜色？

C++ char数组的cin和cin.get()的区别

C++ strtok() - 为什么必须传递 NULL 指针才能获得字符串中的下一个标记？

C++ 为什么没有 int128_t？

相关推荐

最近更新

标签