Html CSS宽度和边距百分比不符合我的要求
为什么fill不在屏幕上获取其包含元素topbar的完整50% 为什么容器没有在屏幕上完成50%的内含元素填充 单独问题:Html CSS宽度和边距百分比不符合我的要求,html,css,Html,Css,为什么fill不在屏幕上获取其包含元素topbar的完整50% 为什么容器没有在屏幕上完成50%的内含元素填充 单独问题: 我的目标是创建一个能够适应几乎所有桌面/笔记本电脑屏幕的布局。我现在不关注手机屏幕的布局。我试图使用宽度和高度作为布局的百分比。请建议这是否是正确的方法或为我指出其他方法。因为主体的高度不确定。您需要一个父dom当您使用高度和宽度的百分比时，父元素具有特定的像素大小非常重要 在这种情况下，topbar类的大小应该以像素为单位我将研究如何使用和修改现有的响应框架，如骨架CSS
我的目标是创建一个能够适应几乎所有桌面/笔记本电脑屏幕的布局。我现在不关注手机屏幕的布局。我试图使用宽度和高度作为布局的百分比。请建议这是否是正确的方法或为我指出其他方法。因为主体的高度不确定。您需要一个父dom当您使用高度和宽度的百分比时，父元素具有特定的像素大小非常重要
在这种情况下，topbar类的大小应该以像素为单位我将研究如何使用和修改现有的响应框架，如骨架CSS:。使用该框架，您只需分配类来创建各种宽度，这些宽度表示为屏幕的一部分，例如列。我之所以使用百分比，是因为不同的屏幕具有不同的宽度/高度。我想它会被检测出来并被使用。此后，我的百分比规格将生效。如果这不是它的工作原理，那么如何在运行时检测高度/宽度？我不会担心高度。除非你需要把所有的东西都放在屏幕的可视区域，否则这并不重要。相反，关注宽度。如果您确实需要担心屏幕的高度，最简单的方法是使用CSS媒体查询来检测屏幕。或者您可以使用jQuery和$window.height.Thank之类的东西。我正在尝试你的jquery建议。另外，正如您所怀疑的，我想使用屏幕的完整可视区域进行渲染。只是好奇，您自己过去是否尝试过jQuery测试。我想知道这个建议是否真的有效。不管怎样，我都在努力，我总算成功了。不确定这是不是正确的做事方式。但我在上面发布的代码中所做的唯一更改是从最小高度更改为最大高度。我并没有使用jQuery或在代码中显式地设置任何元素的高度。这是我最初期待的行为。但是由于这个问题的一些答案，我不知道这是怎么回事。如果有人有时间/耐心，请解释
<html>
<head>
<style>
html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
* { margin: 0; padding:0; }
.topbar {
min-width: 100%;
min-height: 50%;
background-color: green;
}
.fill {
min-width: 100%;
min-height: 50%;
background-color: white;
}
.container {
min-width: 100%;
min-height: 50%;
background-color: blue;
}
</style>
</head>
<body>
<div class="topbar">
"topbar
<div class="fill">
"fill"
<div class="container">
"container"
</div>
</div>
</div>
</body>
</html>