html - 在 td 内制作一个可滚动的 div，其中的 div 定义了绝对位置-6ren

html - 在 td 内制作一个可滚动的 div，其中的 div 定义了绝对位置

转载作者：可可西里更新时间：2023-11-01 12:56:09

24

4

如何使用 CSS 属性来允许具有嵌套 div 的 div 定义了绝对位置，以便能够在定义的位置滚动一次那些 div 超出了它们的父级 div？

我已经精简了我的元素(希望)仅包含您在下面需要的内容，并且我认识到使用我在此处展示的示例可以使用更简洁的方法来执行此操作，但我认为这值得一问，因为有人可能有我(和其他人)可以从中学习的洞察力。在我的示例中，div“盒子”(它们有 class=stuffbox)被放置在 div(有 class =innerstuffcols) 并且它们溢出了它们父级 div 的垂直边界。

    #mainHeader {
	    background-color: #999999;
	    color: #ffffff;
	    position: absolute;
	    width: 100%;
	    height: 5%;
	    left: 0;
	    top: 0;
    }

    #mainPlace {
        position:absolute;
	    width:100%;
	    height:95%;
	    left:0;
	    top:5%;
	    overflow:hidden;
    }

    #mainTable {
	    position:absolute;
	    left:0;
	    height:100%;
	    width: 85%;
	    overflow:hidden;
    }

    #mainMenu {
	    position:absolute;
	    left:85%;
	    right:0;
	    height:100%;
    }


    #tablebody {
	    height: 100%;
	    width: 100%;
    }

    th.tableheaders {
	    border:1px solid black;
	    height: 5%
    }

    td.someCols {
	    border:1px solid black;
    }

    table, th, td {
    	border-collapse: collapse;
    }

    div.innerstuffCols {
	    height: 100%;
	    width:100%;
	    overflow-y: auto;
	    overflow-x: hidden;
    }

    div.stuffbox {
	    height:200px;
	    position:absolute;
	    width:200px;
	    left:5px;
    	text-align: center;
    	background-color: #f1f1f1;
    }

<html lang="en-US">
	<head>
		<meta charset="utf-8">
		<title>stuff</title>
		<link rel="stylesheet" href="st.css">
	</head>
	<body>

		<div id="mainHeader">
			<p align="center"> random header here </p>
		</div>

		<div id="mainPlace">
			<div id="mainTable">
				<table style='width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;border:1px solid black'>
					<tr id='tableheader'>
						<th class='tableheaders'>header 1</th>
						<th class='tableheaders'>header 2</th>
					</tr>

					<tr id='tablebody'>
						<td class='someCols'>
							<div class='innerstuffCols'>
								<div class='stuffbox' style='top:55px;'> stuff 1 </div>
								<div class='stuffbox' style='top:265px;'> stuff 2 </div>	
								<div class='stuffbox' style='top:475px;'> stuff 3 </div>
								<div class='stuffbox' style='top:685px;'> stuff 4 </div>
								<div class='stuffbox' style='top:895px;'> stuff 5 </div>
								<div class='stuffbox' style='top:1105px;'> stuff 6 </div>	
							</div>
						</td>
						<td class='someCols'>
							<div class='innerstuffCols'>
							some other stuff
							</div>
						</td>
					</tr>

				</table>

			</div>
			<div id="mainMenu"> 
				<p> some stuff here </p>
			</div>
    </div>
    </body>
    </html>

如前所述，我知道仅在我的示例中给出的范围内，有更好的方法可以做到这一点(使位置不是绝对的，等等)但是由于与更大的元素相关的各种原因(在这一点上 - 学术好奇心)我更愿意看到一个解释如何让上面的例子工作，同时保持那些 divs 的绝对位置。

如果问题的措辞不佳，我深表歉意(让我知道，我会再试一次)，但希望这个例子能说明我的意图。

提前致谢。

最佳答案

使用position:relative 使绝对定位元素相对于该容器定位，并使用overflow:scroll 使其可滚动。 (您也可以省略 div 并直接在表格 cel 上执行此操作。)

#mainHeader {
  background-color: #999999;
  color: #ffffff;
  position: absolute;
  width: 100%;
  height: 5%;
  left: 0;
  top: 0;
}

#mainPlace {
  position: absolute;
  width: 100%;
  height: 95%;
  left: 0;
  top: 5%;
  overflow: hidden;
}

#mainTable {
  position: absolute;
  left: 0;
  height: 100%;
  width: 85%;
  overflow: hidden;
}

#mainMenu {
  position: absolute;
  left: 85%;
  right: 0;
  height: 100%;
}

#tablebody {
  height: 100%;
  width: 100%;
}

th.tableheaders {
  border: 1px solid black;
  height: 5%
}

td.someCols {
  border: 1px solid black;
}

table,
th,
td {
  border-collapse: collapse;
}

.innerstuffCols {
  position: relative;
  overflow-y: scroll;
  width: 100%; 
  height: 100%;
}

div.stuffbox {
  height: 200px;
  position: absolute;
  width: 200px;
  left: 5px;
  text-align: center;
  background-color: #f1f1f1;
}

<div id="mainHeader">
  <p align="center"> random header here </p>
</div>

<div id="mainPlace">
  <div id="mainTable">
    <table style='width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;border:1px solid black'>
      <tr id='tableheader'>
        <th class='tableheaders'>header 1</th>
        <th class='tableheaders'>header 2</th>
      </tr>

      <tr id='tablebody'>
        <td class='someCols'>
          <div class='innerstuffCols'>
            <div class='stuffbox' style='top:55px;'> stuff 1 </div>
            <div class='stuffbox' style='top:265px;'> stuff 2 </div>
            <div class='stuffbox' style='top:475px;'> stuff 3 </div>
            <div class='stuffbox' style='top:685px;'> stuff 4 </div>
            <div class='stuffbox' style='top:895px;'> stuff 5 </div>
            <div class='stuffbox' style='top:1105px;'> stuff 6 </div>
          </div>
        </td>
        <td class='someCols'>
          <div class='innerstuffCols'>
            some other stuff
          </div>
        </td>
      </tr>

    </table>

  </div>
  <div id="mainMenu">
    <p> some stuff here </p>
  </div>
</div>

关于html - 在 td 内制作一个可滚动的 div，其中的 div 定义了绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51601897/

24

4

0

文章推荐： PHP - 使用 imagecopyresampled() 裁剪图像？

文章推荐： html - 如何增加拨动开关的宽度

文章推荐： javascript - 如何使 SVG 在 DOM 中不占用空间？

文章推荐： PHP bind_params 为空

html - 位置相对/绝对
我想要做的是在每个框的蓝色标题之后获取红色文本。看来我必须添加另一个 div？我已经添加并修改了 .card-indus img 的位置，但结果永远不是我想要的。你知道为什么即使我将 positi
css - 绝对/相对位置尝试强制滚动条到页面顶部
所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大部分时间都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，
html - 绝对/相对定位问题
下面是我正在处理的代码。如您所见，有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度，这是因为有时，'#child' 的高度小于或长于它的父级
html - 将标题按钮居中而不使其成为静态/绝对
我目前正在创建一个看起来有点像这样的固定 header 。 https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568 Logo 始终位于左侧，小按钮始终位于
css - “绝对”位置元素在放置在父级范围之外时不显示？
我怎样才能得到一个绝对定位的子 div，当它放在父 div 的范围之外时不显示？ https://jsfiddle.net/knp9ebys/9/ .papa { background:red;
html - CSS定位相对于固定/绝对
如果我对 CSS 显得相当“菜鸟”，我深表歉意。我一直在尝试设置以下... #0 { width: 100%; height: y; border: 1px solid black; } #
css - 绝对/相对定位布局溢出
很长一段时间以来，我一直在摆弄一个特定的布局问题，但我显然采用了错误的方式。以下是分解为基本组成部分的方法: SOME HEADER
c# - 绝对 URL 不适用于虚拟目录？
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。例如: http://www.site.com/app_1/default.aspx ===> http:
c# - 绝对 URL 不适用于虚拟目录？
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。例如: http://www.site.com/app_1/default.aspx ===> http:
haskell - protected 绝对/相对文件路径类型
我想知道是否有一个库在某处提供受新类型保护的 FilePath 类型。我找到了我想要的http://hackage.haskell.org/package/darcs-2.8.4/docs/src/D
Java 数据库 - 绝对 URL
如果我尝试使用以下方式连接到我的嵌入式数据库: private static String url = "jdbc:sqlite:~/hr4413/pkg/sqlite/Models_R_US.db"
python - Django 绝对 url
所以我是 django 的新手，我一直在研究 PHP CodeIgniter，其中将绝对 URL 放入 href 我通过调用 URL 帮助程序使用了一个名为 base_url 的函数它给出的输出类
jquery - Div 水平居中 NO 绝对
我有一个小问题。我在其他 div 中有一些图像元素的容器 div。像这样的东西: 我需要将容器垂直居中，但我不能使用顶部:-healfHeight； mar
javascript - IE8 绝对/相对定位元素不显示
我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常，当
css - 绝对 td 的匹配高度
我正在尝试设置一个卡住列，唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的，它可以跨越多行。如果它不是绝对定位的，那么这将迫使同一行中
css - 绝对 div 居中和响应？
这个问题在这里已经有了答案: Centering text vertically and horizontally in a div (1 个回答) 关闭 5 年前。
css - 如何设置Div(绝对)宽度100%
当它的位置绝对时，我试图使一个框宽度为 100%？下图是我想要做的 https://i.imgur.com/qMaT361.gif float .box1 { position:re
javascript - 绝对 HTML 元素和浏览器滚动
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
css - 绝对 Div 填充窗口的剩余部分
我有 3 个 div，都是 positioned: absolute，但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。我知道这听起来很菜
javascript - 绝对 .position() 值
这个问题在这里已经有了答案: Retrieve the position (X,Y) of an HTML element (32 个答案) 关闭 8 年前。有时候，当我请求某个对象的.posit

首页

博学

6Ren·AI

商城

html - 在 td 内制作一个可滚动的 div，其中的 div 定义了绝对位置