请教一个样式的布局问题_html/css_WEB-ITnose
<div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="height:100%;background-color:red"></div>
请问怎么样将d3填满余下的空间?
回复讨论(解决方案)
宽和高都用百分比
xuejun405,你看下d3的style我用了100%的
加一个：html,body{height:100%;}
加了不行
<div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="height:100%;background-color:red"></div>
js更正版，窗口更改大小后也可以重置d3大小
<body style="height:100px;margin:0px"> <div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="background-color:red"></div> </body><script> function resetD3() { var css1 = document.compatMode == 'CSS1Compat'; var h = document[css1 ? 'documentElement' : 'body'].clientHeight; var d1 = document.getElementById('d1'), d2 = document.getElementById('d2'), d3 = document.getElementById('d3') d3.style.height = h - d1.offsetHeight - d2.offsetHeight + 'px'; } window.onload = window.onresize = resetD3;</script>
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Windows 11: 导入和导出开始布局的简便方法
Aug 22, 2023 am 10:13 AM
在Windows11中，“开始”菜单经过重新设计，并具有一组简化的应用，这些应用排列在页面网格中，这与它的前身不同，后者在“开始”菜单上有文件夹、应用和组。您可以自定义“开始”菜单布局，并将其导入并导出到其他Windows设备，以根据您的喜好对其进行个性化设置。在本指南中，我们将讨论在Windows11上导入开始布局以自定义默认布局的分步说明。什么是Windows11中的Import-StartLayout？导入开始布局是Windows10和更早版本中使用的cmdlet，用于将“开始”菜单的自定
macOS：如何更改桌面小部件的颜色
Oct 07, 2023 am 08:17 AM
在macOSSonoma中，小部件不必隐藏在屏幕外，也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反，它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时，macOS桌面小部件会采用单色样式淡入背景，从而减少干扰，并允许您专注于活动应用程序或窗口中手头的任务。但是，当您单击桌面时，它们将恢复为全彩色。如果您更喜欢单调的外观，并且希望在桌面上保留这一方面的统一性，那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用
如何在 Windows 11 中保存桌面图标位置布局
Aug 23, 2023 pm 09:53 PM
Windows11在用户体验方面带来了很多东西，但迭代并不完全防错。用户不时会遇到问题，图标定位的更改很常见。那么如何在Windows11中保存桌面布局呢？该任务有内置和第三方解决方案，无论是保存当前窗口的屏幕分辨率还是桌面图标的排列。对于桌面上有一堆图标的用户来说，这一点变得更加重要。继续阅读以了解如何在Windows11中保存桌面图标位置。为什么Windows11不保存图标布局位置？以下是Windows11不保存桌面图标布局的主要原因：对显示设置的更改：通常，当您修改显示设置时，配置的自定义
如何使用HTML和CSS创建一个响应式轮播图布局
Oct 20, 2023 pm 04:24 PM
如何使用HTML和CSS创建一个响应式轮播图布局在现代的网页设计中，轮播图是一个常见的元素。它能够吸引用户的注意力，展示多个内容或图片，并且能够自动切换。在本文中，我们将介绍如何使用HTML和CSS创建一个响应式的轮播图布局。首先，我们需要创建一个基本的HTML结构，并添加所需的CSS样式。以下是一个简单的HTML结构：<!DOCTYPEhtml&g
WordPress网页错位现象解决攻略
Mar 05, 2024 pm 01:12 PM
WordPress网页错位现象解决攻略在WordPress网站开发中，有时候我们会遇到网页元素错位的情况，这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象，我们需要仔细分析问题、查找可能的原因，并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略，同时提供具体的代码示例，帮助开
CSS网页背景图设计：创建各种背景图样式和效果
Nov 18, 2023 am 08:38 AM
CSS网页背景图设计：创建各种背景图样式和效果，需要具体代码示例摘要：在网页设计中，背景图是一种重要的视觉元素，它可以有效地增强页面的吸引力和可读性。本文将介绍一些常见的CSS背景图设计样式和效果，并提供相应的代码示例。读者可以根据自己的需求和喜好来选择和应用这些背景图样式和效果，以达到更好的视觉效果和用户体验。关键词：CSS，背景图，设计样式，效果，代码示
H5中position属性的灵活运用技巧
Dec 27, 2023 pm 01:05 PM
H5中如何灵活运用position属性在H5开发中，经常会涉及到元素的定位和布局问题。这时候，CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘附定位（sticky）。本文将详细介绍在H5开发中如何灵活运用position属性
Windows 11 不断添加键盘布局：4 种经过测试的解决方案
Dec 14, 2023 pm 05:49 PM
对于某些用户来说，Windows11会不断添加新的键盘布局，即使他们没有接受或确认更改。WindowsReport软件团队复制了此问题，并且知道如何防止Windows11在您的PC上添加新的键盘布局。为什么Windows11要自行添加键盘布局？这通常发生在使用非母语和键盘组合时。例如，如果您使用的是美国显示语言和法语键盘布局，Windows11可能还会添加英语键盘。如果Windows11添加了您不想要的新键盘布局，该怎么办。如何防止Windows11添加键盘布局？1.删除不需要的键盘布局单击“开
