相关疑难解决方法(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%.到目前为止,将整个事物包装在表中是唯一有效的方法.
推荐指数
解决办法
查看次数
CSS背景图像适合宽度,高度应按比例自动缩放
我有
body {
background: url(images/background.svg);
}
期望的效果是该背景图像的宽度等于页面的宽度,高度变化以保持比例.例如,如果原始图像恰好是100*200(任何单位)且正文宽度为600px,则背景图像最终应为1200px高.如果调整窗口大小,高度应自动更改.这可能吗？
目前,Firefox看起来正在调整高度,然后调整宽度.这可能是因为高度是最长的尺寸而且它试图避免裁剪？我想垂直裁剪,然后滚动:没有水平重复.
此外,Chrome将图像置于中心,不重复,即使background-repeat:repeat明确给出,这仍然是默认值.
推荐指数
解决办法
查看次数
为什么不高度:100%工作将div扩展到屏幕高度？
我希望旋转木马DIV(s7)扩展到整个屏幕的高度.我不知道它为什么没有成功.要查看该页面,您可以访问此处.
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a> …推荐指数
解决办法
查看次数
百分比高度HTML 5/CSS
我试图<div>在CSS中设置一个特定的百分比高度,但它只是保持与其中的内容相同的大小.<!DOCTYTPE html>但是,当我删除HTML 5 时,它可以工作,根据<div>需要占用整个页面.我希望页面验证,所以我该怎么办？
我有这个CSS <div>,其ID为page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
推荐指数
解决办法
查看次数
Css高度百分比不起作用
我有以下简单的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Live Feed</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
I should be tall
</div>
</body>
</html>但是div不会显示高度为100%.为什么？
推荐指数
解决办法
查看次数
仅为html表冻结顶行(固定表格标题滚动)
我想制作一个顶行冻结的html表(所以当你垂直向下滚动时,你总能看到它).
有没有一种聪明的方法可以在没有javascript的情况下实现这一目标？
请注意,我不需要冻结左列.
推荐指数
解决办法
查看次数
拉伸子div高度以填充具有动态高度的父级
正如在下面的小提琴中可以看到的那样,我有两个divs,包含在父母中div,已经伸展到包含大div,我的目标是让这些孩子div的身高相等.
http://fiddle.jshell.net/y9bM4/
推荐指数
解决办法
查看次数
css单行或多行垂直对齐
我有一个可以有一行或多行的标题.
如何垂直对齐文本？如果总是一行,我可以将行高设置为容器高度.
我可以使用JavaScript,但我不是很喜欢它,我正在寻找一种纯粹的CSS方式.
此外,如果容器可以用线条扩展它将是完美的,所以我总是可以在顶部和底部具有相同的填充.
推荐指数
解决办法
查看次数
DIV高度设置为屏幕的百分比？
我希望将父DIV设置为完整100%屏幕高度的70%.我设置了以下CSS,但它似乎没有做任何事情:
body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
height: 100%;
width: 100%;
}
.header {
height: 70%;
}
由于某种原因,它似乎没有工作,并且标题不是屏幕大小的70%.有什么建议？
推荐指数
解决办法
查看次数
为什么百分比高度不适用于我的div？
我有两个高度为90%的div,但显示效果不同.
我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.
有人能解释我为什么会遇到这个问题吗？
以下是我的代码:
<div style="height: 90%">
<div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
<tabset>
<tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
disabled="tabs[0].disabled">
</tab>
<tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
disabled="tabs[2].disabled">
</tab>
</tabset>
</div>
<div id="leaflet_map" ng-controller="iPortMapJobController">
<leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
</div>
</div>
推荐指数
解决办法
查看次数