HTML/CSS:创建包含2列和3列的两行，这两行应该占据窗口视口，单元格应该滚动
HTML/CSS是用于网页开发的标记语言和样式表语言。它们可以用来创建包含2列和3列的两行，并且这两行应该占据窗口视口，单元格应该滚动。
首先，我们可以使用HTML的table元素来创建表格结构。在每一行中，我们可以使用td元素来创建单元格。然后，使用CSS来设置表格的样式和布局。
下面是一个示例代码，可以实现上述要求：
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
flex: 1;
display: flex;
}
.column {
flex: 1;
overflow: auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="column">
<!-- 第一列内容 -->
</div>
<div class="column">
<!-- 第二列内容 -->
</div>
</div>
<div class="row">
<div class="column">
<!-- 第一列内容 -->
</div>
<div class="column">
<!-- 第二列内容 -->
</div>
<div class="column">
<!-- 第三列内容 -->
</div>
</div>
</div>
</body>
</html>在上面的代码中，我们使用了flex布局来实现两行的布局，并且设置了每个单元格的样式。通过设置height: 100%，我们确保了两行占据整个窗口视口的高度。通过设置overflow: auto，我们可以使单元格内容超出单元格高度时出现滚动条。
这个示例代码只是一个基本的框架，你可以根据实际需求来填充每个单元格的内容和样式。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
我尝试用基本的CSS创建一个简单的HTML页面布局(没有CSS或JS库，它应该都适合一个HTML文件)。我希望这两行分别占窗口高度的60%和40%，但至少400px。第一行中的列应占窗口宽度的60%和40%，但至少为400px； 第二行中的列应占窗口宽度<e
浏览 27提问于2020-08-02得票数 0
回答已采纳
3回答
当我使用100%宽度作为body标记时，如何知道使用了多少像素？
html、css、fluid-layout
我正试图制作一个流体布局的网站。因此，为了做到这一点，我试图使用百分比作为测量。如果我没有弄错的话，百分比是根据父元素计算的。由于html标签没有任何设置的宽度，主体标签如何计算100%的宽度？100%是否意味着正在查看页面的屏幕的全部分辨率？
谢谢
浏览 4提问于2016-12-02得票数 2
回答已采纳
2回答
调整DIV大小以显示单页滚动网站
html、css、resize
我甚至不知道我所要求的是否可能，但值得一试。基本上我有一个由jQuery控制的单页滚动网站，但它是一个非常非常简单的代码，没有插件或外部文档。这很好用。如果你愿意的话，每个“页面”都被分成不同的div，分别控制每个页面的图片、表格、字体等功能。，我能做这样的事情吗？我试过了，但也许我没有把“小数”放在正确的位置……<div id="home resize">
<div
浏览 1提问于2014-02-27得票数 0
1回答
固定页眉和页脚，在1fr CSS网格区域内具有可滚动的侧边栏
css、css-grid
我有一个webapp的CSS网格布局，有一个固定大小的页眉和页脚(用rem单元定义)和一个可扩展的中心行(定义为1fr)，其中包含两个侧边栏和一个中央内容区域。外部栅格容器定义了宽度和高度，以填充视口(100vw/vh)。我希望中间的一行占据页眉和页脚之间的所有空间，并使任何溢出的页面滚动</
浏览 2提问于2017-10-13得票数 1
2回答
HTML img资源集/大小在iPhone 4S上不起作用
html、css、media-queries
我已经创建了一个基于Eric Portis的优秀文章"“的网页，但它在我的iPhone 4s上不能正常工作。据我所知，4s有320个虚拟(或CSS)像素宽，但由于4S有Retina显示屏，这实际上相当于640 (= 2x320)个虚拟像素。当我在我的iPhone上(在纵向模式下)查看下面显示的代码时，我看到了两行“大”图像，这两行中的每一行中的每一幅图像
浏览 3提问于2014-10-07得票数 0
3回答
视口vs窗口Vs文档
javascript、html、css、dom
window.innerWidthwindow.innerHeightwindow.screen.heightwindow.screen.width所以，我的桌面屏幕是我知道了，1)视点和文档有什么区
浏览 3提问于2015-11-18得票数 38
回答已采纳
4回答
将纯文本呈现为不使用<pre>的HTML维护空格
javascript、python、html、algorithm、plaintext
给定任何包含可打印字符的任意文本文件，如何将其转换为完全相同的HTML (有以下要求)？除了默认的HTML空格规则之外，不依赖任何
<p>标记可以，但不是必需的(<br />和/或<div>是可以的)当然，我实际上并不是在寻找单间隔输出，字体与算法/标
浏览 1提问于2011-02-15得票数 10
回答已采纳
2回答
应该在html元素还是body元素上设置全局css样式？
html、css
有时我看到人们将全局css样式应用于html，有时我看到他们将它们应用于body，包括原始css和javascript。
这两者之间有什么区别吗？制作全局css样式的标准是什么？在它们之间选择的时候有什么我应该知道的吗？
浏览 1提问于2010-12-31得票数 22
回答已采纳
1回答
JavaFX2中的ListView滚动问题
javafx
我正在开发一个应用程序，它有一个包含需要复杂单元格布局的项目的ListView。单元格的高度是可变的，并且一些单元格倾向于大于视口高度。但是，当ListView充满项目时，滚动拇指往往会在滚动时调整自己的大小，这使得在滚动时很难抓住拇指。这主要发生在通过不同大小的单元时。如果我创建一个与JList一起使用<em
浏览 0提问于2014-04-20得票数 0
3回答
如何使div始终保持80%的页面高度和完全正方形？
html、css、user-interface、responsive
我知道这是一个令人困惑的问题，但我想不出更好的方法来表达它！基本上，我需要一个div元素总是页面高度的80%，并且div的宽度总是与高度相同的宽度(不是页面宽度的80%，而是页面高度的80%，因此div是正方形的)。我已经做了相当多的研究，还没有找到一个方法来做到这一点。我对使用JS持开放态度，但我更愿意只使用CSS来实现这一点。本质上，我希望我的布局能够查看几个不同的页面高度&#
浏览 0提问于2018-04-10得票数 3
4回答
网页不滚动
html、css、overflow
我有一个只使用CSS和HTML的网页，因为某些原因，即使div在页面下方，它也不能让我向下滚动页面来查看div和背景的其余部分。我试图通过从背景中移除修复的部分来修复它，但仍然不起作用。这是我的CSS font-family: 'Bowlby One SC', cursive;} background: url(
浏览 4提问于2013-11-07得票数 1
1回答
如何使ListView的宽度与其单元格的宽度相适应
listview、layout、javafx
因此，受布局中其他区域约束的ListView被精确地缩小为minWidth。但是它所保存的单元格被调整为首选宽度，而不是最小宽度。因此，节点不适合包含视口和水平滚动条。
太恶心了。我想使每个单元格完全适合ListView，并去掉滚动条。更精确。当ListView缩小到它的最小宽度时，它的所有单元格也应该减少到这个最小宽度。我正在寻找一些控制属性，
浏览 7提问于2015-04-26得票数 8
3回答
视觉视口和布局视口之间的区别？
html、css、ipad、mobile-website、viewport
对于像iPhone/iPad这样的移动设备，视觉视口和布局视口有什么区别？
我已经浏览了很多在线资源，但仍然不清楚。
浏览 0提问于2011-06-14得票数 40
回答已采纳
2回答
我试图弄明白，为什么将overflow-x: hidden设置为HTML页面的body会使元素position: fixed，即使我将其设置为position: absolute。代码如下：html, width: 100%; padding: 0; overflow-x: hidden;/><div class='page'
浏览 2提问于2013-02-06得票数 7
回答已采纳
17回答
Div高度100%，扩展到适合内容。
css、html、height、overflow
我的页面上有一个div元素，它的高度设置为100%。身体的高度也是100%。内部div有一个背景和所有的，与身体背景是不同的。这可以使div高度达到浏览器屏幕高度的100%，但问题是，该div中的内容垂直扩展到浏览器屏幕高度之外。当我向下滚动时，div结束于必须开始滚动页面的点，但是内容会溢出。下面是我的CSS的简化： height:100%;
bac
浏览 7提问于2012-03-02得票数 235
回答已采纳
4回答
如何在移动浏览器的视口宽度和高度上对元素进行居中？
javascript、css、html
有没有办法在移动浏览器的视口上对元素进行居中？
这意味着当用户按压缩放时，他们仍然应该看到视图中心的元素(比方说，一个div样式为窗口)。
浏览 0提问于2013-09-11得票数 4
回答已采纳
2回答
如何建立一个固定高度的图形，以及一个弯曲的图形说明，以填充空间。
image、flexbox
情境:我想要一个figure，它有一个img和一个垂直叠加的figcaption。figure应该是100vh高，figcaption是它的自然高度(即它可以分裂成两行，或者用户可以更改文本大小)，img应该弯曲以占用剩余的空间。
如果图像最初比视口小，我有一个解决方案：。但是，如果您编辑该笔的图像大小为2000×3000(即大于视口)，它就会中断。示例HTML：
浏览 10提问于2022-11-17得票数 2
回答已采纳
6回答
iframe的大小不能在嵌入式仪表板上动态调整
html、iframe
我们有一个显示在iframe中的Qucksight仪表板
现在我尝试将高度设置为100%和auto
<ifram
浏览 1提问于2019-10-01得票数 4
1回答
了解哪个视图端口是从document.documentElement.clientWidth/高度返回的，以及与window.innerHL.8/innerWidth的区别
javascript、dom、viewport
我对JavaScript和DOM中的viewport的概念有点困惑，尤其是document.documentElement.clientWidth，它应该返回视图端口的宽度。现在，当我研究CSS时，我了解到移动浏览器有两个视口，默认的视图端口和理想的视图端口。对于没有响应技术的浏览器来说，默认的视口非常有用。例如，iPhone
浏览 0提问于2020-05-16得票数 2
回答已采纳
3回答
CSS页眉和页脚在放大时断开
html、css、header、footer
我刚刚完成了这个网站的重新设计()，当用户放大(在FF中按Cntrl+)时，我遇到了页眉和页脚的问题。
这里有一个问题:当用户放大时，页脚/页眉的背景颜色不能填充屏幕的其余部分(水平)。
浏览 2提问于2010-02-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
