相关疑难解决方法(0)
使div填充剩余屏幕空间的高度
我正在开发一个Web应用程序,我希望内容能够填满整个屏幕的高度.
该页面有一个标题,其中包含徽标和帐户信息.这可以是任意高度.我希望内容div将页面的其余部分填充到底部.
我有标题div和内容div.目前我正在使用表格进行布局,如下所示:
CSS和HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>页面的整个高度都已填满,无需滚动.
对于内容div中的任何内容,设置top: 0;将把它放在标题下面.有时内容将是一个真实的桌子,其高度设置为100%.放在header里面content不会允许这个工作.
有没有办法在不使用的情况下达到相同的效果table？
更新:
内容中的元素div也将高度设置为百分比.因此,100%内部的东西div将填充到底部.两个元素也是50%.
更新2:
例如,如果标题占据屏幕高度的20%,则内部指定为50%的表#content将占用屏幕空间的40%.到目前为止,将整个事物包装在表中是唯一有效的方法.
推荐指数
解决办法
查看次数
为div延长全高
有没有一种方法可以用于div扩展到全高？我也有一个粘性的页脚.
这是网页:网站已删除.我正在谈论的中间位是白色div,midcontent有CSS值:
.midcontent{
width:85%;
margin:0 auto;
padding:10px 20px;
padding-top:0;
background-color:#FFF;
overflow:hidden;
min-height:100%;
max-width:968px;
height:100%;
}
所以是的,显然height:100%没有用.此外,所有父容器都设置了高度.
这是一般结构
<body>
<div id="wrap">
<div id="main">
<div class="headout">
<div class="headimg"></div>
</div>
<div class="midcontainer"></div>
</div>
</div>
<div id="footer">
<div class="footer"></div>
</div>
推荐指数
解决办法
查看次数
将HTML和BODY选择器设置为高度:100%; vs使用100vh
我哥哥和我早先在崇高中乱搞,他突然喊道:"我学到了新东西!"
有点震惊,我问道,"那是什么......？"
他回答说,"视口高度!我在IE6开始的时候没有得到完全支持,再也没有真正看过它了." 然后他继续给我看.
我回答说:"我在这里完成了同样的事情." 并向他展示了另一个我搞砸了的沙盒项目.
在我的项目中,在CSS中,我写道
(编辑:我编辑将背景颜色放在div中,而不是html或正文,我的错误)
(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/)
html, body {
height: 100%;
}
div {
height: 100%;
background: green;
}
他的代码是,(jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/)
div {
height: 100vh;
background: green;
}
两者都做了几乎相同的事情.在这里做了一些研究后,似乎通过前一种方法发出的常见问题是无法滚动; 但是,在我的沙箱项目中,我有更多的内容,并能够正常滚动和与网站交互.
我们都没有能够确定两种方法之间的差异.这里的任何人都可以教育我们吗？
谢谢!
推荐指数
解决办法
查看次数
显示地址栏时100vh的高度-Chrome移动
我几次遇到这个问题，想知道是否有解决这个问题的方法。我的问题发生在Chrome移动应用上。在那里，您可以向下滚动一点，地址栏消失。到目前为止，很好，让我们举一个例子：
容器height设置为100vh。
如您所见，底部被切除。
当我向下滚动时，它看起来像这样：
现在看起来不错。因此，很明显，Chrome将地址栏的高度计算为视口高度。所以我的问题是：
有没有办法，不管有没有地址栏，它看起来都一样？这样容器会膨胀吗？
推荐指数
解决办法
查看次数
当容器使用"height:100vh"时,会出现垂直滚动条
我希望内容占据浏览器窗口的全部高度,但不能超越.
当使用100vh作为容器高度时,我可以看到垂直滚动条出现.
.container {
height: 100vh;
border: 3px solid lightsteelblue;
border-radius: 10px;
}
可能是什么问题？
编辑: 更详细的代码:
CSS
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
margin: 0px;
padding: 0px;
}
.page_content {
height: 85vh;
width: 95vw;
border: 3px solid lightsteelblue;
border-radius: 10px;
overflow-y: auto;
margin: 0 auto;
}
.footer {
height: 14vh;
width: 95vw;
margin: 0px auto;
padding: 0px;
}
HTML
<html>
<body>
<div class="container">
<div class="page_content">
...
</div>
<div class="footer"> …推荐指数
解决办法
查看次数
当键盘打开时，移动 Safari 上 html 外部有空白
我在移动 Safari 上的 JavaScript 库中有一个非常奇怪的错误，我尝试用一个简单的示例来重现该错误：
我有基本的 css 和 html：
html,
body {
margin: 0;
padding: 0;
font-family: monospace;
}
body {
min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
#term {
background: black;
color: #ccc;
height: 100%;
}
h1 {
margin: 0;
font-weight: normal;
}
html：
...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="term" contenteditable>
<h1>HELLO Mobile</h1>
...
当我在移动 Safari 上打开网站并打开虚拟键盘时，我可以向下滚动到内容之外。
这是当我将鼠标悬停在 body 上时来自 BrowserStack 的屏幕截图，我无法将鼠标悬停在 html 上以突出显示它。
有人知道如何解决这个问题吗？它看起来像一个基本页面。 …
推荐指数
解决办法
查看次数
如何使用CSS Grid布局粘贴页脚？
我在CSS Grid布局中找到了一个粘性页脚的CodePen解决方案,但它对我来说有两个问题:
- 这是有点丑
min-height: 100%和height: 100% - 它只适用于身体中的两个元素(div和footer)
我需要一些适用于这种HTML结构的东西:
<body>
<nav>Some navigation buttons</nav>
<main>The content</main>
<footer>Copyrights and stuff</footer>
</body>
我真的不想收拾<nav>和<main>成<div>,我就喜欢这样做纯CSS.
// Not required!
// This is just to demo functionality.
$("#add").on("click", function() {
$("<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 …推荐指数
解决办法
查看次数
使用vmin和移动地址栏进行响应式设计
我试图创建一些旁边的方形div(如果文本太多,可以扩展高度......但大多数时候文本不会太多).我试图以响应的方式设置它.
在页面上滚动时,我的移动浏览器中的地址栏会一直显示和消失.当手机处于横向模式时会发生这种情况,每次地址栏开启或关闭时尺寸都会改变.这会产生非常烦人的用户体验.
我的HTML代码中包含以下视口行:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我的代码看起来像这样:
.block {
width: 80vmin;
min-height: 80vmin;
margin: 5% auto;
border-radius: 15vmin;
padding: 20px 10px;
}
显然,罪魁祸首是vmin组件.如果我没有指定vmin,那么在横向模式下查看时框太大了.
有没有办法让vmin忽略地址栏并假装它不存在？如果没有,我还有什么其他选择来解决这个问题？
推荐指数
解决办法
查看次数
如果body具有最小高度,则CSS高度不起作用
如果身体已min-height指定,我不会让我的第一个孩子身体达到100%身高.
<html>
<head>
<style>
html {
height:100%;
}
body {
min-height:100%;
}
#wrapper {
height:100%;
min-width:1120px; /* 250px each side (content width is 870px) */
max-width:2000px;
background-image:url(bg.png);
background-position:50% 25px;
background-repeat:no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- web content -->
</div>
</body>
</html>
这并不会调整包装器窗口的高度.当我删除min-并使用height它时,它会工作.但我必须有内容高度变量...
我确实在SO和谷歌上发现了一些其他帖子,但他们只是提问,没有解决方案.
推荐指数
解决办法
查看次数
如何使 <div> 完全填充浏览器窗口，包括截至 2019 年的 Mobile Safari
我正在开发一个单页网络应用程序，它最常用于移动设备。它的功能之一是地图模式，可以暂时接管整个浏览器窗口；距离比例尺和一些控件附在地图的四个角上。这是地图的一个小截图，所以你可以知道我在说什么：
地图被实现为一个<div>，position: fixed并且所有四个坐标为零；我还在地图可见时临时将 设置为<body>，overflow: hidden以处理底层应用程序显示从原点滚动的情况。这足以使地图在桌面浏览器上完全按照我想要的方式工作。移动浏览器还要求我提供一个类似的元视口标签，"width=device-width,user-scalable=no"以使窗口的可见区域与视口完全对应。
这所有的工作精美几年前，当我最初写这个程序，但沿线的iOS Safari浏览器停止接受任何涉及缩放元视口选项的地方-显然太多的网站被误用的标签，导致文本是unreadably小，但不可缩放。目前，如果您在此浏览器上启用地图，您可能会看到一个稍微放大的视图，这会切断右侧和底部的那些按钮 - 而您对此无能为力，因为所有触摸都被解释为地图的缩放/平移手势，而不是浏览器滚动。如果没有通过这些按钮访问的功能，地图就不会非常有用 - 如果没有右上角的按钮，您甚至无法关闭地图。唯一的出路是重新加载页面，这可能会导致未保存的数据丢失。
我肯定会添加history.pushState/的使用，onpopstate以便地图叠加层表现得像一个单独的页面。您可以使用浏览器的后退按钮退出地图模式 - 但这并不能解决由于缺少按钮而导致的其余功能损失。
我已经考虑使用.requestFullscreen()来实现地图覆盖，但并非所有地方都支持该应用程序本来可以使用。特别是，它显然在 iPhone 上根本不起作用，而在 iPad 上，您会看到一个状态栏和一个覆盖您内容的巨大“X”按钮——我的距离刻度可能不再可读了。无论如何，这在语义上并不是我真正想要的 - 我需要 full window，而不是全屏。
如何在现代浏览器上获得全窗口显示？我能找到的关于这个主题的所有信息都在谈论使用元视口标签，但正如我提到的那样不再有效。
推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×8
html5 ×2
address-bar ×1
browserstack ×1
css-grid ×1
css3 ×1
fullscreen ×1
height ×1
html-table ×1
layout ×1
xhtml ×1