相关疑难解决方法(0)
CSS显示:table min-height无法正常工作
有谁知道我可以使用最新的浏览器进行最小高度的工作？我正在使用CSS表,它似乎忽略了最小高度.
<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>
推荐指数
解决办法
查看次数
如何创建div来填充页眉和页脚div之间的所有空格
我正在努力从使用表格进行布局,再到使用div(是的,是的辩论).我有3个div,标题,内容和页脚.页眉和页脚各50px.如何让页脚div保持在页面底部,内容div填充两者之间的空间？我不想硬编码内容div高度,因为屏幕分辨率可能会改变.
推荐指数
解决办法
查看次数
css calc和min-height无法正常组合
我正在构建一个具有动态高度的布局(正如大多数人所做的那样).我一直在寻找一段时间,但没有找到与我相似的案例.所以在这里,我的简化代码:
HTML:
<div id="body"><div id="content">
content
</div>
</div>
<div id="footer">
abc
</div>
CSS:
#footer{
position: absolute;
bottom: 0;
width: 100%;
background: #ddd;
}
#body{
padding: 60px 50px 70px 50px;
position: relative;
min-height: calc(100% - 130px);
}
#content{
font-family: verdana;
margin-left: 200px;
border-left: 5px solid #ddd;
padding: 0 0 0 10px;
min-height: 100%;
min-width: 500px;
}
body{
margin:0;
overflow-y:scroll;
height:100%;
position:relative;
}
html{
height:100%;
}
问题是,当我使用该代码时,内容高度计算不正确,结果看起来像这个小提琴,而我正在尝试做的是当内容很短时,它应该看起来像这样,当内容很长时,它看起来应该是这样的.
如果我改变min-height到height,当内容很短,我得到了我想要的,但如果内容很长,我得到这个恼人的布局
它似乎calc无法在未指定(使用 …
推荐指数
解决办法
查看次数
DIV在DIV内100%高度,这个古老的谜语
有人可以向我解释为什么黄色DIV不会伸展到底部？
我尝试了各种高度,最小高度等排列,但无济于事.
我应该只使用表格吗？:-)
以下是该页面的输出:http://pastehtml.com/view/cd1ibk3vx.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#mainContainer {
width: 100%;
padding: 0px;
background-color: #EEEEEE;
min-height: 100%;
}
#mainContent {
width: 800px;
margin: 0px auto 0px auto;
padding: 100px 50px 50px 50px;
background-color: #FFFFCC;
min-height: 100%;
}
</style>
</head>
<body>
<div id='mainContainer'>
<div id='mainContent'>Why doesn't this stretch to bottom?</div>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
html和body元素的高度
我一直在Internet上查找以查找min-height和height属性如何在body和html元素上工作。我在很多地方都看过以下代码
html {
height: 100%;
}
body {
min-height: 100%;
}
上面的内容可以与其他div结合使用，以获取页脚粘滞。另一个声明是要设置主体的百分比高度，我们还需要设置一个显式的html高度。
好吧，但是html标记的相对高度是多少？一些答案说，如果视口的高度为100％，则它是相对于视口的。现在，这100％的相对高度是多少？
这篇文章说html元素的高度由视口HTML vsBody控制，但这不是我所看到的
HTML元素的高度可以增加
但是为什么会这样，当内容增加时，html元素的高度也会增加，就像在Chrome开发者工具上看到的那样
码：
html {
height: 100%;
}
body {
min-height: 100%;
}
html {
}
.wrapper {
padding-bottom: 3000px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
}
固定HTML元素的高度
只有当我将html元素的高度显式设置为100％时，它才会获得固定高度：
<html>
<head>
<title>Height</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>html {
height: 100%;
} …推荐指数
解决办法
查看次数
如何适应屏幕全高(使用CSS)？
对于我在html-css中的极度无知感到抱歉.我使用twitter bootstrap框架开发了一个标准的Rails应用程序.如下面的代码段(application.html.erb)所示,我像往常一样组织页面,如标题容器页脚
现在我希望每个页面都能适应屏幕的高度(如果内容较短,则达到屏幕高度的100%,如附加scrrenshot的情况).
事实上,正如你在scrrenshot中看到的那样,我在屏幕的下半部分有一个灰色的区域,而我想要一个填满整个屏幕的页面......
我认为这是一些CSS配置,但我尝试了一些CSS设置但没有成功.有什么建议吗？
谢谢!乔治
<!DOCTYPE html> <html> <head>
<title>Esami Anatomia</title>
<%= render 'layouts/responsive' %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %> </head> <body> <%= render 'layouts/header' %>
<div class="container-flow">
<%= render 'layouts/flashes' %>
<%= yield %>
<div class="layout-filler"> </div>
</div> <%= render 'layouts/footer' %> </body> </html>
推荐指数
解决办法
查看次数