个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我想创建一个占据全屏高度(没有滚动条)但内部有一个可滚动容器的页面。我曾尝试使用百分比高度，但每次百分比在彼此内部使用时都不起作用。
这是我正在尝试做的一个例子。我尝试了很多其他版本，但都没有用。
HTML
<body>
<div id="pageheader">
<h1>Header</h1>
</div>
<div id="container">
<div id="header">
<h2>Section header</h2>
<p>Header text</p>
</div>
<div id="overflower">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</body>
CSS
body {
height: 100%;
background: red;
}
#container {
height: 100%;
background: green;
}
#overflower {
overflow: auto;
height: 100%;
background: blue;
}
overflower div 应该是可滚动的，而页面的其余部分保持静态，占据整个屏幕的高度。
最佳答案
嵌套百分比高度一直是 CSS 2 的一个问题。值得庆幸的是，CSS 3 带来了一个有值(value)的工具，可以用来一劳永逸地解决这个问题(以及类似的问题):flexboxes。
这个想法很简单:flexboxes 允许开发人员定义一个部分如何根据可用空间增长或收缩，在这种情况下可以用来定义 overflower div 应该在其父级内部获得尽可能多的空间，它被设置为在其父级内部占用尽可能多的空间......一直到 body (它被设置为占用整个屏幕高度)。
HTML
<body>
<div id="pagecontainer">
<div id="pageheader">
<h1>Header</h1>
</div>
<div id="container">
<div id="header">
<h2>Section header</h2>
<p>Header text</p>
</div>
<div id="overflower">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</body>
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
#pagecontainer {
display: flex;
flex-direction: column;
background: red;
height: 100%;
}
#pageheader {
flex: none;
}
#container {
display: flex;
flex-direction: column;
flex: auto;
background: green;
}
#header {
flex: none;
}
#overflower {
overflow: auto;
flex: auto;
background: blue;
}
不幸的是，jsfiddle 在处理 body 时做了一些奇怪的事情，所以测试这个的唯一方法是制作一个单独的 HTML 文件。请注意包含一个 div id="pagecontainer - 这是应用 display: flex 所必需的。如果您在 overflow 之间堆叠更多元素div 和 body，确保将 3 个 flex 属性应用于每个!
关于html - 在百分比高度容器中使用溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21363109/
27
4
0
我的函数概念上都返回相同的东西，但结果可以采用不同的形式: function GetThingy() 有四个不同的函数，每个可以返回不同的东西: 0.071(代表增长 7.1% 的 float 值)
这个问题在这里已经有了答案: Int division: Why is the result of 1/3 == 0? (19 个回答) 关闭 4 年前。 有什么方法可以计算(例如)120 的 50
我四处寻找这个，它看起来很简单，但我无法让它工作。 我有一张表格，其中一列需要格式化为百分比。下面是我的代码，但它没有格式化单元格，它只是将它们保留为小数。 我想这是因为 cell ，即使声明为范围，
我刚刚开始使用 WPF。从那以后，我开始关注造型系统。我来自 CSS 背景，我想以百分比设置边距。 当前值以像素为单位
我有一个表，其中每一行都有一个描述字段和一个 bool 值。我正在尝试编写一个查询，我可以在其中按每个相应的描述进行分组，并查看 bool 值为真的次数百分比。 示例表: PID Gen
我从文档中发现，考虑到 orientdb 100% 使用磁盘缓存，它使用的最大大小为 70% 用于读取缓存，30% 用于写入缓存 ( http://orientdb.com/docs/last/plo
有什么方法可以获取 docker 容器内部而不是外部的 cpu 百分比吗？! docker stats DOCKER_ID 显示的百分比正是我需要的，但我需要它作为变量。我需要获取容器本身内部的 cp
我正在尝试计算数据集每列中类别的比例(百分比)。 示例数据: df <- data.frame( "Size" = c("Y","N","N","Y","Y"), "Type" =
我应该使用小数还是 float 在数据库中存储比率？特别是在 SQL2005 中。 最佳答案 这取决于您对准确性的需求。如果您可以容忍来自存储 float 的 IEEE 方法的典型错误，则使用 flo
我正在创建一个游戏，目前必须处理一些math.random问题。 我的Lua能力不是那么强，你觉得怎么样 您能制定一个使用 math.random 和给定百分比的算法吗？ 我的意思是这样的函数: fu
如何在SQL中动态计算百分比？ 假设您有一个名为 Classes 的下表: ClassSession StudentName -------------------------------
如何通过 jQuery 创建具有百分比的数字掩码输入？我是否让输入仅接受三个数字，并在用户完成输入时在数字后添加百分号(keyup)？ 我不使用插件。 示例:1% 或 30% 或 99% 或 100%
我正在尝试构建一个工具，可以突出显示具有最高介数中心性的社交网络节点。我将所有网络节点的测量值计算到字典中，按顺序对字典进行排序，然后仅保留前 3 对。 我希望这个工具是可扩展的，所以我想保留前 10
MYSQL 中的人员如何将一个日期条目和分数的用户百分比与另一个日期条目和分数进行比较，从而有效地返回从一个日期到另一个日期的用户百分比增加情况？ 几天来我一直在试图解决这个问题，但我已经没有想法了，
我需要进行查询，结果是百分比。 我现在的查询如下所示: select COUNT(CREATE_WEEKDAY), CREATE_WEEKDAY, COUNT(CREATE
我有一个图像上传功能，其工作原理如下: $('.update-insertimage-form').submit(function() { $(".submit-newupdate-btn").add
我的问题很简单，但我仍然找不到这个问题的答案... 假设我们有两个包含图像的容器。 我们有类似的东西 #containera { width: 50%; height: 50%; backgr
是否可以将 CSS 尺寸指定为除其父元素之外的另一个元素的百分比？例如，我想将 div 的 border-radius 指定为 div 宽度的 10%。但是，border-radius: 10% 在
我正在尝试设置按钮的大小并以百分比进行编辑 但是这个的线性大小是不同的。为什么？ 最佳答案 您好，问题出在属性 box-sizing 上.默认为 input type
我将它用于我的页眉，该页眉在一页上下滚动页面中发生变化。我注意到它没有响应，所以我想问你是否知道一种使它响应的方法。就像将 0-690 更改为百分比，以便它可以在移动设备和电视屏幕上使用。 HTML
我是一名优秀的程序员,十分优秀！