个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试集中一个容器。此容器有一个内部容器，内部容器又包含页眉、内容和页脚。
我想要实现的是，父容器的高度必须与其内容相符，但要遵守限制，设置最大高度。
我尝试了两种不同的方法，但都不能完全工作，我创建了一个 fiddle来说明我的观点。
如果你一步一步删除内容，你会发现尽管我只设置了最大高度，容器并没有变低，它的行为就像设置了高度一样。
如果将容器的类更改为“container-2”，您会看到尽管随着内容被删除它变得越来越低，但当内容变得比父容器大时，内部容器继续拉伸(stretch)，就好像没有overflow:auto 设置在“内容”框中。
内容框设置了editablecontent属性，方便测试
<!DOCTYPE html>
<head>
<style>
/** just setting some colors **/
body
{
background: red;
}
.container
{
background: white;
}
section
{
background: silver;
}
header, footer
{
background: #ffff0050;
}
/** just setting some colors **/
.container
{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
width: 800px;
max-height: 80vh;
}
.container-2
{
position: absolute;
top: 50%; left: 50%;
width: 800px;
max-height: 80vh;
overflow: hidden;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
section
{
height: 100%;
}
header, footer, .content
{
padding: 20px;
}
.content
{
overflow-y: auto;
height: calc(100% - 160px);
}
header, footer
{
height: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class='container'>
<section>
<header>
header
</header>
<div class='content' contenteditable=true>
Lorem ipsum dolor sit amet, nec latine aperiam expetendis ne, eum at numquam interesset, in nec veri posidonium. Id solum aliquip ius. In vix eros debet adolescens, ea pro brute dolores. No ridens vituperata mei. Mei in duis discere ocurreret, autem evertitur signiferumque ut vim. Ne vim erant denique, posse consectetuer qui ut.
Eos labores pertinax eu, tamquam gloriatur an vim. Et lorem delenit has. Pro lorem latine cu, eu sit omnis scripserit. Mel an case prima, nec petentium adversarium et, per eirmod consequuntur ad.
At minimum propriae eum, cu assueverit necessitatibus ius. Facer omnium facilisis pri id. Has porro harum id, ne ius ferri aeterno. Zril offendit argumentum ad duo. Ei vel atqui nostro. Ei vim aeque complectitur, id per solet eligendi. Doming efficiantur et ius, usu in tempor denique, sed nisl saepe iisque in.
Id viderer sensibus corrumpit quo, mea at corpora repudiare reprimique, vix cu indoctum volutpat assueverit. Nominavi scaevola gloriatur ius no, vis ex laudem viderer. Qui utroque maluisset euripidis no. Te regione omnesque vix, debitis sententiae theophrastus vel ad, verear commune incorrupte ad cum. Ei his erant appareat, eum in omnes dolorem sapientem. Te nec doctus volumus abhorreant. Te debitis dolorem democritum mel, duo prodesset abhorreant ne, offendit gubergren eu mei.
Mel eu solum ancillae torquatos. Et vim doming animal reprimique. Ex per iusto posidonium, et per movet eleifend. Per in quas erant scribentur. Vim veritus eligendi ad, vis stet neglegentur te.
Lorem ipsum dolor sit amet, nec latine aperiam expetendis ne, eum at numquam interesset, in nec veri posidonium. Id solum aliquip ius. In vix eros debet adolescens, ea pro brute dolores. No ridens vituperata mei. Mei in duis discere ocurreret, autem evertitur signiferumque ut vim. Ne vim erant denique, posse consectetuer qui ut.
Eos labores pertinax eu, tamquam gloriatur an vim. Et lorem delenit has. Pro lorem latine cu, eu sit omnis scripserit. Mel an case prima, nec petentium adversarium et, per eirmod consequuntur ad.
At minimum propriae eum, cu assueverit necessitatibus ius. Facer omnium facilisis pri id. Has porro harum id, ne ius ferri aeterno. Zril offendit argumentum ad duo. Ei vel atqui nostro. Ei vim aeque complectitur, id per solet eligendi. Doming efficiantur et ius, usu in tempor denique, sed nisl saepe iisque in.
Id viderer sensibus corrumpit quo, mea at corpora repudiare reprimique, vix cu indoctum volutpat assueverit. Nominavi scaevola gloriatur ius no, vis ex laudem viderer. Qui utroque maluisset euripidis no. Te regione omnesque vix, debitis sententiae theophrastus vel ad, verear commune incorrupte ad cum. Ei his erant appareat, eum in omnes dolorem sapientem. Te nec doctus volumus abhorreant. Te debitis dolorem democritum mel, duo prodesset abhorreant ne, offendit gubergren eu mei.
Mel eu solum ancillae torquatos. Et vim doming animal reprimique. Ex per iusto posidonium, et per movet eleifend. Per in quas erant scribentur. Vim veritus eligendi ad, vis stet neglegentur te.
Lorem ipsum dolor sit amet, nec latine aperiam expetendis ne, eum at numquam interesset, in nec veri posidonium. Id solum aliquip ius. In vix eros debet adolescens, ea pro brute dolores. No ridens vituperata mei. Mei in duis discere ocurreret, autem evertitur signiferumque ut vim. Ne vim erant denique, posse consectetuer qui ut.
Eos labores pertinax eu, tamquam gloriatur an vim. Et lorem delenit has. Pro lorem latine cu, eu sit omnis scripserit. Mel an case prima, nec petentium adversarium et, per eirmod consequuntur ad.
At minimum propriae eum, cu assueverit necessitatibus ius. Facer omnium facilisis pri id. Has porro harum id, ne ius ferri aeterno. Zril offendit argumentum ad duo. Ei vel atqui nostro. Ei vim aeque complectitur, id per solet eligendi. Doming efficiantur et ius, usu in tempor denique, sed nisl saepe iisque in.
</div>
<footer>
footer
</footer>
</section>
</div>
</body>
您知道让这两者协同工作的方法吗？
最佳答案
使用 .container-2 然后需要替换这个 -
.content {
溢出-y:自动；
高度:计算(100% - 160px)；
}
有了这个
.content {
溢出-y:自动；
最大高度:计算(80vh - 160px)；
}
关于css - 绝对位置垂直集中的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47414041/
26
4
0
我想要做的是在每个框的蓝色标题之后获取红色文本。 看来我必须添加另一个 div？我已经添加并修改了 .card-indus img 的位置，但结果永远不是我想要的。 你知道为什么即使我将 positi
所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大部分时间都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，
下面是我正在处理的代码。如您所见，有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度，这是因为有时，'#child' 的高度小于或长于它的父级
我目前正在创建一个看起来有点像这样的固定 header 。 https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568 Logo 始终位于左侧，小按钮始终位于
我怎样才能得到一个绝对定位的子 div，当它放在父 div 的范围之外时不显示？ https://jsfiddle.net/knp9ebys/9/ .papa { background:red;
如果我对 CSS 显得相当“菜鸟”，我深表歉意。我一直在尝试设置以下... #0 { width: 100%; height: y; border: 1px solid black; } #
很长一段时间以来，我一直在摆弄一个特定的布局问题，但我显然采用了错误的方式。 以下是分解为基本组成部分的方法: SOME HEADER
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。 例如: http://www.site.com/app_1/default.aspx ===> http:
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。 例如: http://www.site.com/app_1/default.aspx ===> http:
我想知道是否有一个库在某处提供受新类型保护的 FilePath 类型。我找到了我想要的http://hackage.haskell.org/package/darcs-2.8.4/docs/src/D
如果我尝试使用以下方式连接到我的嵌入式数据库: private static String url = "jdbc:sqlite:~/hr4413/pkg/sqlite/Models_R_US.db"
所以我是 django 的新手，我一直在研究 PHP CodeIgniter，其中将绝对 URL 放入 href 我通过调用 URL 帮助程序使用了一个名为 base_url 的函数 它给出的输出类
我有一个小问题。 我在其他 div 中有一些图像元素的容器 div。像这样的东西: 我需要将容器垂直居中，但我不能使用顶部:-healfHeight； mar
我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常，当
我正在尝试设置一个卡住列，唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的，它可以跨越多行。 如果它不是绝对定位的，那么这将迫使同一行中
这个问题在这里已经有了答案: Centering text vertically and horizontally in a div (1 个回答) 关闭 5 年前。
当它的位置绝对时，我试图使一个框宽度为 100%？ 下图是我想要做的 https://i.imgur.com/qMaT361.gif float .box1 { position:re
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我有 3 个 div，都是 positioned: absolute，但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。 我知道这听起来很菜
这个问题在这里已经有了答案: Retrieve the position (X,Y) of an HTML element (32 个答案) 关闭 8 年前。 有时候，当我请求某个对象的.posit
我是一名优秀的程序员,十分优秀！