`
shuaijie506
  • 浏览: 138056 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

关于table布局中自适应高度的解决办法

ChromeFirefoxXHTMLHTML 
阅读更多
可支持IE6+,firefox,chrome。其中容易被忽略的是
<DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN">
，不能使用XHTML 
<DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN">
<html>
	<HEAD>
		<title>table布局中自适应高度的解决办法</title>
<style type="text/css">
html,body{height:100%;font-size:12px;}
td {border:1px solid red;font-size: 12px;color: #000000;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}
#main{border:1px solid red;width:100%;min-height:100%;height:100%;overflow:hidden !important;overflow: visible;}
#header{height:94px;border:1px solid red;}
</style>
</head>
<body>
<table id="main">
	<tr><td id="header">我的顶部</td></tr>
	<tr><td>我是主要内容</td></tr>
</table>
</body>
</html>
分享到：
| james邮件服务器附件问题
评论
1 楼 suiye007 2010-10-08  
哈哈，我马上试试，以前看到的都是JS解决的，麻烦！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    UITableviewCell高度自适应

    3. **tableView(_:heightForRowAt:)**：这是实现自适应高度的核心方法。在代理方法中，我们需要根据单元格的实际内容返回动态计算的高度。通常，我们会在该方法中调用`systemLayoutSizeFitting(_:)` 方法，它会基于...

    VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    首先，你需要计算出需要从浏览器窗口高度中减去的部分，这部分通常是你页面中固定布局的高度。例如，如果你的导航栏高度为50像素，你可以定义一个变量x来表示这个值。 然后，在Vue实例的data中定义tableHeight变量...

    解决Layui 表格自适应高度的问题

    总之，解决Layui表格自适应高度的问题需要结合CSS样式调整、避免固定高度、利用Layui提供的响应式布局功能以及可能时采用JavaScript动态计算。通过这些方法，可以确保无论内容多少，表格都能保持良好的视觉效果和...

    EasyUI布局 高度自适应

    最后想到会不会是布局的问题，经过实践，最后问题解决。 1：比如在项目中用到了datagrid。如果界面比较简单－－－只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体。如果在datagrid上方还有其他...

    Vue 自适应高度表格的实现方法

    在Vue中实现自适应高度的表格是一项常见的需求，尤其是在处理大量数据时，保持页面布局整洁，避免全局滚动条出现，是提升用户体验的关键。本文将详细介绍如何在Vue项目中，特别是在使用Element-UI库的情况下，实现...

    典型的三行两列居中高度自适应布局

    在CSS布局设计中，创建一个典型的三行两列居中高度自适应的页面布局是一项常见的任务，这有助于确保网页在不同设备和浏览器上保持良好的视觉效果。以下将详细讲解如何实现这种布局，以及代码示例中涉及的关键CSS属性...

    iframe高度自适应.pdf

    内部页面中同样设置了高度为100%，并通过父页面设置的`table`的高度来调整内部`iframe`的高度。 #### JavaScript实现细节 - **`handleFrameLoad()`**：此函数负责获取当前页面的高度，并根据计算得到的高度调整`...

    tablevie自适应高度

    "tablevie自适应高度"这个主题，就是关于如何实现这种动态高度调整的技术。 首先，我们要理解UITableView的Cell高度计算原理。默认情况下，UITableView的Cell高度是固定的，但我们可以使用`UITableViewDelegate`中...

    FastReport自动换行及行高自适应

    1. 设计时预设最大行数高度：在FastReport的设计界面中，你可以为memo组件设定最大的行数，这样当内容超过一行时，会自动换行。这种方式的优点是保证了memo内容的完整展示，但缺点是可能会导致数据区域的band宽度...

    ios-自适应Table View Cells.zip

    `"ios-自适应Table View Cells.zip"`这个压缩包中包含的资源可能是关于如何在Objective-C中实现Swift中的自适应TableView Cell的文章或者代码示例。在iOS开发中，自适应（Autolayout）是实现界面动态调整的关键技术...

    自适应表格，适用于PC，手机同一页面

    在实现自适应表格的过程中，开发者通常会利用响应式Web设计（Responsive Web Design, RWD）的技术，如媒体查询（Media Queries）、流式布局（Fluid Grids）、自适应图片（Flexible Images）等。媒体查询允许CSS样式...

    Table布局的优缺点介绍及为什么不建议使用

    5. **布局属性受限**：Table布局中的元素（如`&lt;td&gt;`）有时难以应用CSS样式，特别是当尝试使用百分比高度时，这限制了设计的灵活性。 6. **学习成本与维护**：掌握CSS布局方法后，开发者通常会发现使用Table布局进行...

    iview table高度动态设置方法

    本篇文章将详细介绍如何解决在使用iView Table组件时遇到的高度固定导致显示不全的问题，并提供一种动态设置表格高度的方法。 问题背景： 在开发过程中，我们通常会在自己的高分辨率显示器上预览和设计界面，但当...

    html图片自适应手机屏幕大小的css写法

    总结以上知识点，我们了解到在HTML中使用CSS实现图片自适应手机屏幕大小的关键在于使用百分比宽度和自动高度的组合，确保盒模型的一致性，以及通过CSS Reset和重置默认布局减少浏览器间的差异。这些方法共同确保了在...

    layui表格 列自动适应大小失效的解决方法

    例如，可能有全局样式设置了固定的列宽或者表格的`table-layout`属性被设置为`fixed`，这将阻止列自适应宽度。 2. **JavaScript事件未触发**：layui表格的列宽自适应可能依赖于某些JavaScript事件，如窗口的`resize...

    IOS动态分配table cell高度

    在iOS开发中，UITableView是...通过以上知识点的应用，我们可以创建一个能根据内容自适应高度的UITableView，为用户提供更好的阅读体验。在实践中，需要不断优化和调试，确保在保持功能的同时，兼顾性能和用户体验。

    tab选项卡切换效果，tab选项卡内容宽度自适应

    在这个项目中，"tab选项卡内容宽度自适应"意味着设计者关注于使内容区域的宽度能够根据浏览器窗口大小或设备屏幕尺寸自动调整，以提供更好的用户体验。 实现这样的效果，主要涉及以下几个关键知识点： 1. HTML ...

    HTML页面自适应宽度的table(表格)

    `后，避免在tr或td中使用height属性，因为这会影响表格高度的自适应。 完整代码示例： ```html &lt;table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;"&gt; ... &lt;/table&gt; ``` ...

Magicbox
Global site tag (gtag.js) - Google Analytics