个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试更流畅的设计。
我希望特定的 div 占整体的百分比。我还想在每个 div 中设置流体/液体填充。
<body>
<div class='image'></div>
<div class='fourty'></div>
<div class='sixty'></div>
</body>
CSS:
body {
margin-top: 85px;
min-height: 100%;
}
.image {
content: image_url('something.jpg');
width: 100%;
height: auto;
}
/*I'm assuming the padding I'm setting is a percentage of the .fourty
div not the overall body. Granted, width is 100%.*/
.fourty{
padding: 4% 8%;
min-height: 40%;
width: 100%;
}
.sixty{
padding: 4% 8%;
min-height: 60%;
width: 100%;
}
我遇到的问题是百分比高度似乎对这些 div 没有生效。它似乎只是一个基于 div 内容的自动高度。
我该如何纠正/实现这个？我对 JS 解决方案持开放态度，但对如何在 CSS 中实现这一点更感兴趣。
最佳答案
就 CSS 而言，没有任何样式可以使元素的高度等于整个文档(正文)高度的特定百分比。
然而，CSS 确实为您提供了将元素的高度设置为视口(viewport)高度的特定百分比(使用 VH 单位)的选项，但是由于这没有实现您的目标，我将给您留下一个 javascript 答案.
相关javascript函数:
function getDocumentHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};
function setDivHeight(target, percentage) {
var desiredHeight = getDocumentHeight() * (percentage/100)
target.style.height = desiredHeight + 'px';
};
初始设置高度和视口(viewport)调整大小:
var targetDiv = document.getElementById('target');
setDivHeight(targetDiv);
window.addEventListener('resize', setDivHeight.bind(null, targetDiv))
关于javascript - 如何使div占整体高度的百分比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34366289/
24
4
0
我正在阅读Head First Design Patterns一书，在第382页上说: Composite Patterns is used when you have collection of o
我将我的电脑用作 wifi 热点，并将其他设备连接到它。然后使用wireshark，我可以看到特定设备上发送/接收的数据包，但是我怎样才能看到设备正在查看的完整网页而不是单独的数据包？ 最佳答案 尝试
在 URL 中打开我的 Jenkins 时，我似乎无法登录它会抛出消息“用户缺少整体/读取权限”。我试过answer来自类似的问题，但禁用安全性不起作用。 Jenkins 继续抛出错误。有人建议我一起
我已经使用工具分配测试了我的应用程序并得到了这张图片: 如图所示，我的应用程序正常工作，但它通常以总字节数计值吗？我担心“#Allocations (Net/Overall)”，因为它的颜色是红色。这
我遵循教程 Deployment on Tomcat without modification of monitored webapps (beta) .监控站点正在运行，我可以看到统计页面。问题是
所以我有一个 div，其中整个东西都是一个 anchor 标记，我试图控制颜色在悬停时的显示方式并获得不同的结果。希望我能用 CSS 做到这一点。发生的事情是悬停，一个文本发生变化，但另一个没有。但是
我创建了一个程序，您可以在其中输入行驶的英里数和每 jar 油使用的加仑数，该程序会显示每 jar 油的 mpg。我使用的是 Visual Studio 2010。当我输入标记值 -1 时，系统会给出
我有一个由 N 个节点组成的 zookeeper 集群(彼此了解)。如果我在 zk 客户端连接字符串中只传递 M < N 个节点地址怎么办？集群的行为是什么？ 在更具体的情况下，如果我只从集群中传递
我一直在试图弄清楚当使用诸如 pushViewController:animated、presentModalViewController:animated 和 UITabBarViewControl
我已经在 VIM 中安装了 minikube，并且我拥有具有所有权限的服务帐户 token 。是否有来自 kubernetes 的 API 来获取资源使用情况(总体)。 最佳答案 要获取 CPU 和内
如何通过 HTTP 客户端(例如 CURL、Insomnia、Postman 等)快速使用使用 JWT token 的 JHipster 生成的应用程序？ 最佳答案 嗯，我研究了一段时间，发现你必须遵
我是一名优秀的程序员,十分优秀！