我正在为一个非常简单的图库webapp整理布局,但是当我使用HTML5 doctype声明时,我的一些div(100%)的高度会立即缩小,而且我似乎无法使用CSS使它们丰满起来。
我的HTML在https://dl.dropbox.com/u/16178847/eyewitness/b/index.htmlcss在https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
我需要做什么才能让它100%的高,这样我的照片和页脚都是全高的?
我陷入了一个类似的问题,以大小画布,所以这是我所做的和完美的工作。
除了做:
body{ width: 100%; height: 100%;}
如下所示设置所需的元素:
.desired-element{ width: 100vw; height: 100vh}
这样,您就可以确保在宽度和高度上拥有100%的视口。vw代表viewwidth,vh代表viewheight
我希望这对某人有帮助
事实上,要使其发挥作用,请执行以下操作:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scrolling Demo</title>
<style>
html, body {
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
}
.page {
min-height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="nav" class="page">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id="page1" class="page">
<h1><a name="about">about</a></h1>
About page content goes here.
</div>
<div id="page2" class="page">
<h1><a name="portfolio">portfolio</a></h1>
Portfolio page content goes here.
</div>
<div id="page3" class="page">
<h1><a name="contact">contact</a></h1>
Contact page content goes here.
</div>
</body>
</html>
仅当父元素具有定义的高度时,即。。e不是auto
的值。如果其高度为100%,则还必须定义父级的父级高度。这可以一直到html
根元素。
因此,将html
和body
元素的高度设置为100%
,以及您首先希望该元素的每个祖先元素的100%
高度设置为height
。
请参见此示例,以使其更清楚:
html, body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
问题内容: 这是完整的代码: 什么也没出现。但是,如果我删除第一行(),则所有页面均按预期绿色。 我有两个问题: 如何在不删除标签的情况下填写页面? 为什么要删除使其起作用? 问题答案: CSS 属性,百分比值和DOCTYPE 问题的 第一部分 询问如何对您的身高施加100%的高度,其他人多次回答。本质上,在根元素上声明高度: 问题的 第二部分 受到的关注要少得多。我会尽力回答。 为什么去除mak
问题内容: 这是完整的代码: 什么也没出现。但是,如果我删除第一行(),则所有页面都是绿色的。 我有两个问题: 如何在不删除标签的情况下填写页面? 为什么要删除使其起作用? 问题答案: CSS 属性,百分比值和DOCTYPE 问题的 第一部分 询问如何对您的身高施加100%的高度,其他人多次回答。本质上,在根元素上声明高度: 问题的 第二部分 受到的关注要少得多。我会尽力回答。 为什么去除make
问题内容: 我正在为一个非常简单的库webapp进行布局排序,但是当我使用HTML5 doctype声明时,我的某些div的高度(即100%)会缩小,而我似乎无法保持饱满他们使用CSS进行备份。 如果我删除HTML5 doctype声明,则一切都如我所愿,但我确实想使用正确的HTML5 doctype声明。 如果我将doctype设置为HTML5并且未进行任何更改,则包含照片的div和页脚div将
我一直在获取输出Student@42a57993.我想打印学生[0]中的结果,我还想打印学生数组中的所有元素,有人能帮我告诉我出了什么问题吗?我有一个主要的方法类是Client,另一个是Student。
我为我的angular表单中的表单输入元素设计了一个加载组件,以便在从api加载字段时显示。这里,我必须向< code>app-loader组件提供组件的高度和宽度,以便它可以相应地占用空间。 现在我所做的是使用手动开关 到目前为止,我有如下所示。
这是我的桌子 我需要在控制台上显示哈里的名字和他45岁的年龄'''