Html 如何使用 CSS 指定的 DOCTYPE 修复 100% 高度表中的表行高?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/503981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
提问by Baffled by ASP.NET
This is a follow up question to that at Can I create a HTML table width a percentage height but pixel accurate row heights?.
这是我可以创建一个 HTML 表格宽度百分比高度但像素精确行高的后续问题吗?.
I have a table in a HTML page that will be used for tabular data (so I don't want an answer based around divs). This needs to be rendered at 100% height with the top row having a fixed size and the second row stretching to fit the rest of the available area.
我在 HTML 页面中有一个表格,将用于表格数据(所以我不想要基于 div 的答案)。这需要以 100% 的高度呈现,顶行具有固定大小,第二行拉伸以适应可用区域的其余部分。
I have used the following code:
我使用了以下代码:
<html>
<body>
<table style="border-collapse:collapse;height:100%;width:100%;">
<tr>
<td style="border:solid 1px black;height:100px">1</td>
<td style="border:solid 1px black">2</td>
</tr>
<tr>
<td style="border:solid 1px black">3</td>
<td style="border:solid 1px black">4</td>
</tr>
</table>
</body>
</html>
This works as I require it to.
这按我的要求工作。
The problem is, when I put this in an ASP.NET page created in Visual Studio, it adds a DOCTYPE element. After adding the DOCTYPE (and setting the CSS for the html and body tags to include height:100%), the top row of the table is much bigger than the bottom row and neither row is of a fixed height.
问题是,当我把它放在一个在 Visual Studio 中创建的 ASP.NET 页面时,它添加了一个 DOCTYPE 元素。添加 DOCTYPE(并将 html 和 body 标签的 CSS 设置为包含 height:100%)后,表格的顶行比底行大得多,并且两行的高度都不固定。
I know I should use a DOCTYPE and not rely on "quirks mode" in Internet Explorer to ensure future compatibility. However, I have tried all the DOCTYPEs I can find to try and change this behaviour to what I need but can't get it to work. It does work in Firefox but the job is for an Intranet where the users use IE7.
我知道我应该使用 DOCTYPE 而不是依赖 Internet Explorer 中的“怪癖模式”来确保未来的兼容性。但是,我已经尝试了我能找到的所有 DOCTYPE 来尝试将此行为更改为我需要的行为,但无法使其正常工作。它确实适用于 Firefox,但该工作适用于用户使用 IE7 的 Intranet。
If you want to see the problem, try the following:
如果您想查看问题,请尝试以下操作:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
<body style="height:100%">
<table style="border-collapse:collapse;height:100%;width:100%;">
<tr>
<td style="border:solid 1px black;height:100px">1</td>
<td style="border:solid 1px black">2</td>
</tr>
<tr>
<td style="border:solid 1px black">3</td>
<td style="border:solid 1px black">4</td>
</tr>
</table>
</body>
</html>
Does anyone know the answer?
有人知道答案吗?
采纳答案by mercator
There's an easy way to fix this, especially if the page just contains this table, and you just want it to work. I'm not sure if ASP.NET will let you though: Add a comment in front of the doctype. E.g.
有一个简单的方法可以解决这个问题,特别是如果页面只包含这个表,而你只是想让它工作。我不确定 ASP.NET 是否会允许您:在文档类型前添加注释。例如
<!-- Here for IE6/7 -->
<!DOCTYPE html (etc.)>
... The HTML that works in quirks mode ...
This will make IE6 and IE7 trigger quirksmode, meaning those earlier answers will actually work. But it is perfectly valid use of the DOCTYPE and will trigger standardsmode in all other browsers. IE8 (RC1 anyway) also uses quirks mode for this, though it does also render correctly in standards mode.
这将使 IE6 和 IE7 触发quirks模式,这意味着那些早期的答案实际上会起作用。但它是完全有效的 DOCTYPE 使用,并且会在所有其他浏览器中触发标准模式。IE8(无论如何 RC1)也为此使用了 quirks 模式,尽管它在标准模式下也能正确呈现。
Of course, keeping IE6 and 7 in quirks mode means they'll be in quirks mode for all the other stuff too, so if you're going to use a lot of other CSS, you might regret it.
当然,保持 IE6 和 7 处于 quirks 模式意味着它们也将处于所有其他东西的 quirks 模式,所以如果你打算使用很多其他 CSS,你可能会后悔。
回答by olemarius
I try to use % as less as possible because padding, borders and margins are added to the 100% width if any, unless you use browsers from the stone-age.. I use to just tile a background image to fake whatever I want to have 100% height on a parent element or the body.
我尝试尽可能少地使用 % ,因为填充、边框和边距会添加到 100% 宽度(如果有),除非您使用石器时代的浏览器。在父元素或主体上具有 100% 的高度。
回答by olemarius
first I would recommend setting the height at the Row level, not the Cell level. And secondly if you set the height of the second row to 100% IE will have it fill the rest of the available space in the table. The following should work:
首先,我建议在行级别设置高度,而不是单元级别。其次,如果您将第二行的高度设置为 100%,IE 将填充表格中剩余的可用空间。以下应该工作:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
<body style="height:100%">
<table style="border-collapse:collapse;height:100%;width:100%; table-layout:fixed;">
<tr style="height: 100px;">
<td style="border:solid 1px black">1</td>
<td style="border:solid 1px black">2</td>
</tr>
<tr style="height: 100%">
<td style="border:solid 1px black">3</td>
<td style="border:solid 1px black">4</td>
</tr>
</table>
</body>
</html>
Using the percent based heights though is probably not your best choice, but without knowing and understanding what you are trying to accomplish thats the best advice i can give you
使用基于百分比的高度虽然可能不是您的最佳选择,但在不知道和理解您要实现的目标的情况下,这是我可以给您的最佳建议
回答by cletus
Well the solutionI posted to your problem, which had a (necessary) div wrapped around your table, works perfectly with that DOCTYPE and a couple of others I tried so I'm not sure what the problem is.
好吧,我发布到您的问题的解决方案,其中有一个(必要的)div 包裹在您的桌子周围,与该 DOCTYPE 和我尝试过的其他几个完美配合,所以我不确定问题是什么。
Are you simply choosing to ignore it because it has a div in it? Or did you not read it or try it? What is the problem with divs?
您是否只是因为它有一个 div 而选择忽略它?或者你没有阅读或尝试?div有什么问题?