相关疑难解决方法(0)
如何使div 100%的浏览器窗口高度？
我有一个有两列的布局 - 左边div和右边div.
右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.
我试过了height:100%,min-height:100%;等等
推荐指数
解决办法
查看次数
为什么不高度: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> …推荐指数
解决办法
查看次数
如何使浮动div的父级100%高度？
这是HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
这是CSS:
#inner {
float: left;
height: 100%;
}
在使用Chrome开发人员工具进行检查后,内部div的高度为0px.
如何强制它为父div的高度的100%？
推荐指数
解决办法
查看次数
CSS - 为什么百分比高度不起作用？
为什么百分比值height不起作用,但百分比值width呢？
例如:
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}
最终的宽度为#working视口的80%,但最终的高度为#not-working0.
推荐指数
解决办法
查看次数
Chrome/Safari不会填充100%高度的flex父级
我想要一个具有特定高度的垂直菜单.
每个孩子必须填写父母的高度并且具有中间对齐的文本.
孩子的数量是随机的,所以我必须使用动态值.
Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.
为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.
我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.
- 这个问题有解决方法吗？
- 或者是否有一种不同的技术可以使所有
.item填充父级的高度与文本垂直对齐到中间？
这里的示例jsFiddle,应该在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div> …推荐指数
解决办法
查看次数
百分比高度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%.为什么？
推荐指数
解决办法
查看次数
居中和右对齐flexbox元素
我想有A B和C中间对齐.
我怎样才能D完全走向正确？
之前:
后:
这样做的最佳做法是什么？
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>推荐指数
解决办法
查看次数
如果我使用HTML5 doctype,为什么我不能使我的div达到100%的高度？我怎样才能达到100%的高度
我努力让分选一个非常简单的Web应用程序库的布局,但是当我使用了HTML5 doctype声明,我的一些申报单(这是100%)的高度深究下去缩水,我似乎无法丰满他们使用CSS备份.
我的HTML位于https://dl.dropbox.com/u/16178847/eyewitness/b/index.html,css位于https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
- 如果我删除HTML5 doctype声明,所有都是我想要的,但我真的想使用正确的HTML5 doctype声明.
- 如果我将doctype设置为HTML5并且不做任何更改,则带有照片和页脚div的div不可见,大概是因为它们是0px高.
- 如果我将doctype设置为HTML5并使其成为
body { height: 100px }和.container { height: 100px }/.container { height: 100% },它变得可见,但我需要的是它是全高而不是像素的高度. - 如果我尝试像上面那样做,但与
body { height: 100% }照片和页脚div再次不可见.
我需要做些什么来使它达到100%的高度,以便我的照片和页脚div是全高？
推荐指数
解决办法
查看次数
为什么我的div高度100%仅在移除DOCTYPE时才起作用？
这是整个代码:
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
什么也没出现.但是,如果我删除第一行(the doctype),则所有页面都是预期的绿色.
我有两个问题:
- 如何
div在不删除标签的情况下填充页面？ - 为什么删除
doctype它使它工作？
推荐指数
解决办法
查看次数