html自动适应高度问题

小_虎 2009-10-13 10:02:48

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table width="100%" height="100%" style="background: #c9defa; border-right: 1px solid #dfebfc">

            <tr>

                <td width="100%" align="left" valign="top" class="style1">

                    <table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">

                        <tr>

                            <td height="9">

                            </td>

                        </tr>

                    </table>

                    <iframe src="http://www.baidu.com" scrolling="yes" frameborder="0" id="iframeRight"

                        width="100%" height="96%"></iframe>

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

我这样的目的是让这个Table自动适应浏览器的大小，让他百分比显示，宽度可以，但是这个Iframe的高度始终是没有高度，也就是没有适应浏览器高度。

看这两个高度，height="100%"和height=“96%”，我这里设置成百分比就始终不行，如果随便设置哪个height个绝对值比如：500px就行了

-----------
又莫名其妙的在一个页面上是行的，我拷贝到另一个页面就不行了，郁闷。

请大家不要让我设置固定高度，谢谢。
我要自动适应，要不然我就不发帖了

...全文

848 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

小_虎 2009-10-13

打赏
举报

问题是如一楼所说，
难道这样的方法不好吗？
为什么建aspx的时候默认：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我去找了下资料DOCTYPE 的东西。。。。
--------
　　开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。

　　查看很多使用XHTML标准开发的网站，第一行就是：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。

　　而另一些符合标准的站点的代码则如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

　　那么这些代码有什么含义？一定要放置吗？

　　什么是DOCTYPE

　　上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。

　　其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

　　要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

　　XHTML 1.0 提供了三种DTD声明可供选择：

　　* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

　　我们选择什么样的DOCTYPE

　　理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

　　注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。

　　打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。

　　补充

　　DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

　　更多细节可以访问W3C的网站

--------------

limii 2009-10-13

打赏
举报

[Quote=引用 1 楼 huming_h 的回复:]
请在页面上增加
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
[/Quote]
同意。以前我就吃过忽略这行的亏

quanpp_user 2009-10-13

打赏
举报

comzheng 2009-10-13

打赏
举报

请在css代码中添加如下代码
html,body
{
height:100%;
}

f231358 2009-10-13

打赏
举报

实现iFrame自适应高度



<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

看到了吧，关键就在于onload="this.height=iFrame1.document.body.scrollHeight"

huming_h 2009-10-13

打赏
举报

请在页面上增加
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

textarea文本框根据输入内容自动适应高度

背景:实现一个自适应高度的输入框, 空格与换行每次最多只能输入一个;尝试与思路首先想到的就是 textarea, 但是需要设置高度或者行数 rows, 这样超出设定就会出现滚动条, 而且空格与换行还是可以无限输入enmmm... 然后想到貌似 div 也可以;但是 div 不支持 placeholder, 还需要自己模拟, 还有同样的问题就是空格与换行可以连续无限输入; 在各个浏览器与移动...

在一个DIV中有多个未知高度的子元素DIV，怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度。下面我们来看一下css设置高度自适应屏幕高度的方法。首先，我们刚开始设计某些网页板块时，总会给其一个height高度值，让它刚好适合内容大小。示例：Title.con{height: 100px;width: 400px;background-color: #9fcdff;...

div自动适应浏览器高度的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

html5如何设定高度自适应？HTML/CSS的自适应高度，高度问题如何解决？先设置html及body的CSS的高，分别为height:100% 如下： html,body{height:100%;margin:0px;} 或 html{height:100%;} body{height:100%;margin:0px;} 后面的高为100%才有效：或怎么让Html的高度自适应屏幕高度用百分比布...

.NET社区

62,046

社区成员

669,049

社区内容

发帖

与我相关

我的任务

javascript云原生企业社区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章