有两个(或更多)带有display的div:表格单元格填充整个屏幕，而不管其中使用CSS的内容是什么
这个问题涉及到前端开发和CSS布局的知识。
在前端开发中，可以使用CSS来控制元素的样式和布局。对于这个问题，我们可以通过CSS来实现让带有display属性的div元素填充整个屏幕。
首先，我们需要确保页面的根元素（通常是<html>或<body>）的高度设置为100%，以确保整个页面的高度占满屏幕。
然后，对于每个带有display属性的div元素，我们可以使用CSS的height: 100vh;来设置其高度为视口高度的100%。vh是视口高度的单位，1vh等于视口高度的1%。
接下来，我们可以使用CSS的display: flex;来创建一个弹性布局容器，使得div元素自动填充整个容器的空间。
最后，我们可以使用CSS的justify-content: center; align-items: center;来使div元素在容器中水平和垂直居中。
以下是一个示例的CSS代码：
html, body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}在这个示例中，我们创建了一个名为.container的div元素作为容器，并将其样式设置为上述所述的样式。你可以将其他带有display属性的div元素放置在.container内，它们将自动填充整个屏幕。
这种方法适用于需要让带有display属性的div元素填充整个屏幕的场景，例如创建全屏背景、全屏幕的模态框等。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法给出具体的链接。但你可以在腾讯云官方网站上查找相关产品和文档，以了解他们提供的云计算解决方案和服务。
相关·内容
我想要两个div，堆叠在一起，有display: table-cell;。我已经尝试过这样做，但我不能完全做到这一点，下面是我的代码。} width: 100%;.wrapper { height: 100%;
浏览 1提问于2016-09-06得票数 0
回答已采纳
2回答
具有三个div的响应条
、、、
在我的Wordpress儿童主题(TwentyTwelve)中，我正在创建一个带有菜单、搜索表单和社交链接菜单的栏。在找到解决方案之前，我一直无法正确地对齐它们。我在css中显示一个表格行，然后显示三个单元格(也是在css中)。代码如下所示：display: table-row;text-align: right; display:tabl
浏览 1提问于2014-12-02得票数 0
在我的另一个问题中，每个人都说表比div表更好，还有一个人提到div表没有比html表更好的好处。我很困惑，为什么要引入display: table，如果它很糟糕，那又有什么意义呢？
浏览 2提问于2013-03-02得票数 2
回答已采纳
4回答
我正在练习制作一个响应移动屏幕分辨率的网页。我用宽度成功了。我怎么用身高来处理这个问题？我的包装纸继续保持在顶部，而不是垂直对齐。 <div class="wrapper"> </div</em
浏览 5提问于2013-02-26得票数 2
回答已采纳
创建流畅的布局是一个巨大的痛苦。现在，我完全理解应该避免像魔鬼这样的布局的表，但是...在我看来，表单元格非常适合整个可用的空间。
有没有人用桌子来做完美的流畅布局？请告诉我其中的危险和陷阱。
浏览 4提问于2010-03-04得票数 5
回答已采纳
2回答
我的有一个带有display:table的div，有两个带有display:table-cell的孩子。每个子元素都有不同的填充，但每个元素中的内容仍然是对齐的。有什么办法可以解决这个问题吗？我希望child-two保持与表格单元格的左上角
浏览 22提问于2017-02-24得票数 0
回答已采纳
4回答
我试图用CSS构建一个“表”，但是如果内容太短，我很难获得一些<DIV>来填充布局的宽度。很难用语言来解释，所以这里有一个小提琴：
基本上，我不想在这个例子中看到粉红色的部分--我想让浅蓝色的框展开来填充宽度，而不管它中的内容有多少。使用display: table-row可以正确地填充</
浏览 4提问于2015-04-02得票数 2
回答已采纳
对于我的第一个响应设计，我使用css @media和display: none；或display:table-cell来显示或隐藏侧栏。这很好，我需要显示:三个div布局的表格单元格。: none; } }
JS是标准的ToogleDisplay函数( e.style.display = "table-cell"；代替e.style.d
浏览 7提问于2014-10-23得票数 0
回答已采纳
有一个#wrapper div设置为inline-block，由于某些原因，我不能更改或添加任何内容。我需要在#wrapper div中显示一个表：#page { background-color: #dd3333; /* Cannot</div> </div</e
浏览 0提问于2018-03-07得票数 1
回答已采纳
3回答
我有一个html页面分为4个部分:页眉，菜单，内容和页脚。页眉在顶部，页脚在底部。中间是左边的菜单和右边的内容。页面的高度可以由菜单或内容设置，这取决于哪个更大(两者都可以更改)。我想把一个背景在菜单块延伸到页脚，即使实际的菜单项是短得多。因此，基本上，我希望根据它或内容的大小来填充菜单块，这取决于哪个更大。有什么想法吗？
浏览 4提问于2015-08-26得票数 2
回答已采纳
2回答
在与HTML表格斗争了几天之后，我的前额有一个缩进网格，顺便说一句，它是我键盘的镜像副本。这都是根据内容吗？是否受到同一行中其他单元格的影响？简单的CSS？我只想知道加法高度是如何计算的，这样我每次都能计算出自己的期望。
浏览 2提问于2014-02-09得票数 2
回答已采纳
我有一个CSS问题。我有一个表格，谁的宽度和高度是窗口的百分比，并希望单元格的溢出隐藏(垂直和水平)。从研究中看，溢出似乎不能很好地处理表或百分比，但当我试图同时修复这两个问题时，修复问题尤其严重。第二个方法是在缩小窗口时隐藏右边的单元格--我想裁剪其中的部分内容，而不是留下一个大的空白列--
浏览 2提问于2014-06-19得票数 0
CSS display: block; height: 100%;我在FF4和IE9中得到了同样的结果。
编辑：算出了。还是不知道怎么修。td基本上缩小了它的内容，尽管它看起来不是这样的。不过，我不想显式地定义我的td的高度，那么我该如何解决这个问题呢？
浏览 7提问于2011-07-25得票数 2
回答已采纳
谁能解释一下为什么下面的两个表布局不一样(具体地说，为什么第二个' table -cell‘div没有伸展到'table’父div的其余宽度，就像在真正的表中那样)？</div> &l
浏览 2提问于2013-04-18得票数 7
我有以下几点：<th class="sort"> <div class="sort"></div><a href="#">Last Name</a>
</th>table.tablesorter thead th.sort
浏览 0提问于2010-08-13得票数 1
这里是一个div和透明的gif，用作与高度相关的宽度的左边框.那么，如何使content占用剩余宽度呢？注:图像有“显示:表格-单元格”，因为似乎只有这样才能缩小，而不仅仅是增长.,--| | |
'-----------
浏览 5提问于2015-01-20得票数 0
回答已采纳
5回答
好吧，在设计一个网站的时候，我突然想到一个想法...我的站点中有几个部分更适合充当表格，但不是表格数据。出于某些原因，我真的很讨厌使用表格来做一些不是表格的事情。所以我注意到了CSS的显示选项，但是我不能让它正常工作。这就是我正在尝试的。问题出在哪里？></div>
这就是CSS</em
浏览 0提问于2010-11-24得票数 27
回答已采纳
我正在尝试获取一个标签来填充表格单元格，同时对标签应用某种类型的填充。我尝试了一种通过搜索找到的方法，但似乎不起作用……这是我的CSS： height: 1px; height:100%; display: block; vertical-al
浏览 0提问于2011-12-15得票数 0
回答已采纳
试图创建具有100%宽度内容的表格，但" width“不起作用。有谁能帮上忙吗？我怎么才能修复它？表中有"div“，因为我不能用其他方式填充内容。我需要从表格边框填充，我需要表行之间的底线。所以我需要再添加一个div来填充:(.有没有人可以告诉我如何在不增加一个"div“的情况下做正确的事情。.tabble {
浏览 1提问于2019-12-14得票数 0
2回答
我的页面中有两个垂直对齐的div元素。一个div的内容是固定的，但另一个div的内容是变化的，所以它的高度是不变的。我想让这两个div的高度相同。我该怎么做呢？？
浏览 0提问于2009-06-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
