当我设置的HTML标记，以100％的高度我的内容消失 [英] My content disappears when I set the HTML tag to 100% height
问题描述
我有一个垂直布局，我想在页面上保持居中。一列保持固定的页上，而另一个应该根据内容滚动并有一些装饰浮动的div是绝对的。我想滚动栏显示垂直100％，即使内容不要求高度，但我似乎无法得到这个工作。我给自己定的HTML标记和身体标记为height：100％，以及为所有必要的div标签。具有html标记设置该属性将导致所有的内容除了.content和.share消失。
下面是我的html：
＆LT; HTML和GT;＆LT;身体GT;
＆LT; DIV CLASS =排行榜＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =分享＆GT;＆LT; P＆GT;所有的内容©2011
＆LT; BR /＆GT;
网页设计©＆LT; A HREF =http://www.unillu.com目标=_空白＆GT; Unillu＆LT; / A＆gt;中梅根在此之前，普法伊费尔＆LT; / P＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =sidebar1＆GT;
＆LT; IMG SRC =资产/ llama.pngWIDTH =168HEIGHT =265ALT =Deathllama标识/＆GT;
＆LT; UL类=导航＆GT;
＆LT;李＆GT;＆LT; A HREF =howto.html＆GT;＆LT; IMG SRC =资产/ phone.pngWIDTH =208HEIGHT =15ALT =！如何把铃声您的手机上 /＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =dinosaur.html＆GT;＆LT; IMG SRC =资产/ kill.pngWIDTH =208HEIGHT =31ALT =杀恐龙最简单的方式！ /＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =ringtones.html＆GT;＆LT; IMG SRC =资产/ ringtones.pngWIDTH =208HEIGHT =15ALT =坏铃声供你使用！ /＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =legal.html＆GT;＆LT; IMG SRC =资产/ legal.pngWIDTH =208HEIGHT =15ALT =相应的使用内容！/＆GT; ＆LT; / A＆GT;＆LT; /李＆GT; ＆LT;李＆GT;＆LT; A HREF =contact.html＆GT;＆LT; IMG SRC =资产/ contact.pngWIDTH =208HEIGHT =15ALT =跟我说话！/＆GT;＆LT ; / A＆GT;＆LT; /李＆GT; ＆LT;李＆GT;＆LT; A HREF =的faq.html＆GT;＆LT; IMG SRC =资产/ faq.pngWIDTH =208HEIGHT =15ALT =！你问我任何东西之前看这里 /＆GT;＆LT; / A＆GT;＆LT; /李＆GT; ＆LT;李＆GT;＆LT; A HREF =index.html的＆GT;＆LT; IMG SRC =资产/ home.pngWIDTH =208HEIGHT =15ALT =回家！/＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆所述p为H.;＆放大器; NBSP;＆下; / P＆GT;
＆LT; DIV CLASS =extraDiv1＆GT;＆LT; / DIV＆GT;
＆LT;！ - ＃结束sidebar1 - ＆GT;＆LT; / DIV＆GT; ＆LT; DIV CLASS =内容＆GT;
＆LT; DIV CLASS =extraDiv2＆GT;＆LT; / DIV＆GT;
＆LT; P＆GT;联系与LT; / P＆GT; ＆LT; DIV CLASS =ads_column＆GT;＆LT; / DIV＆GT;
＆LT; H3 ID =TEXT＆GT;联系布莱恩，创建者：＆LT; / H3 GT＆;
＆下，P ID =文本＆GT;＆下; A HREF =至mailto：brianbritvec@gmail.com＆GT; brianbritvec@gmail.com< / A＆GT;＆下; / P＆GT;
＆LT; H5 ID =TEXT＆GT;联系梅根，站长：LT; / H5＆GT;
＆下，P ID =文本＆GT;＆下; A HREF =至mailto：mprior@unillu.com＆GT; mprior@unillu.com< / A＆GT;＆下; / P＆GT;
＆LT;！ - 结束.content - ＆GT;＆LT; / DIV＆GT;
＆LT;！ - 结束.container - ＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这是我的CSS：
HTML，身体{
保证金：0;
填充：0;
颜色：#FFF;
FONT-FAMILY：万千，宋体，宋体，黑体，无衬线;
字体大小：100％;
行高：1.4;
背景颜色：＃61ADC3;
}
HTML {
最小高度：100％;}
身体，.container，.content，.extraDiv2，.sidebar {
高度：100％;
最小高度：100％;
}/ * ~~元/标签选择~~ * /
UL，OL，DL {
填充：0;
保证金：0;
}
H1，H2，H3，H4，H5，H6，第{
保证金：10;
填充右：15px的;
填充左：15px的;
}
一个IMG {
边界：无;
}答：链接答：访问，：悬停，一：主动，一：聚焦{
颜色：#FFF;
文字修饰：下划线;
}
。容器 {
宽度：640像素;
保证金：0汽车;
溢出：隐藏;
背景颜色：＃61ADC3;
}
.sidebar1 {
的z-index：2;
浮动：左;
宽度：224px;
填充底：10px的;
位置：固定;
背景附件：固定;
背景颜色：＃61ADC3;
背景重复：不重复;
背景位置：右上;
文本对齐：权利;
填充右：32PX;
}.extraDiv1 {
的z-index：3;
位置：绝对的;
顶部：0;
宽度：29px;
高度：609px;
保证金左：227px;
背景图像：网址（资产/ sidebar.png）;
背景重复：不重复;
背景位置：左上;
}.extraDiv2 {
的z-index：5;
位置：固定;
的margin-top：-10px;
宽度：12px的;
背景图像：网址（资产/ stripe.jpg）;
背景重复：重复-Y;
背景位置：左;
}.content {
的z-index：5;
宽度：384px;
浮动：权利;
填充顶：10px的;
填充右：0像素;
填充底：10px的;
背景图像：网址（资产/ gradient.png）;
背景重复：不重复;
背景位置：右上;
背景附件：滚动;
背景颜色：＃FBB03B;}
/ *哈克的IE * /
* HTML .content {
高度：100％;
}
/ *结束IE哈克* /.leaderboard { 宽度：795像素;
保证金：0px auto的;
背景颜色：＃61ADC3;
}
#descriptions {
字体大小：12像素;
行高：1;
显示：块;
宽度：170像素;
保证金：15px的55像素;
}#descriptions H5 {
字体大小：14px的;
字体重量：大胆的;
}#text {
字体大小：12像素;
行高：1;
宽度：200像素;
保证金：15px的25px的;
}#text H5 {
字体大小：14px的;
字体重量：大胆的;
}#play {
宽度：25像素;
保证金右：0像素;
浮动：左;
}
.share {
的z-index：5;
字体大小：9px;
底部：0像素;
文本对齐：权利;
宽度：256PX;
位置：固定;
浮动：左;
颜色：＃F00;
}.share一个{
颜色：＃C30;
}#ads_column {
浮动：权利;
填充：5像素5像素0像素为5px;
}
.content UL，.content醇{
填充：0 15px的15px的40像素;
}
ul.nav {
列表样式：无; / *这个删除列表标记
}
ul.nav李{
显示：块;
保证金：5像素;
}
ul.nav一，ul.nav一个：走访{
保证金：5像素;
显示：块; 文字修饰：无;}
ul.nav答：悬停，ul.nav一：主动，ul.nav答：重点{
边框：1px的;
边框颜色：＃F30;
}
您的CSS是一个巨大的混乱。
首先，避免使用的位置是：固定，尤其是在这样大的规模。大多数移动浏览器不修复这些职位，而一些老的浏览器与他们渲染不正确。
高度：100％表示将高度设置为其父容器的100％。然而，在这种情况下是容器，而这又是尺寸为容器，这是体的100％。为主体不具有高度在其上设置，身体的高度被计算为足够的高度，以包住整个页面。
的注：设置高度：100％身体上不工作，使其扩展到整个窗口;你必须设置位置：绝对在身体和顶部做出/左/右/底部零做到这一点的
回到身体高度计算。请注意，容量计算做的不可以包含任何的浮动，因为当你浮动的东西，它需要它的之外正常布局。那就是浮动凡是没有占据间距！
试试这个实验：关闭溢出：隐藏在你的容器，你会看到容器和高度尸体突然坍缩成零。你的所有元素浮动的，所以他们不占用空间，如果没有溢出：隐藏
因此，你的CSS整个混乱实质上是告诉内容大小本身容器的高度，这是体，这是什么高度必须包括所有的100％，100％网页内容。随着溢出：隐藏中的容器，即高度的内容的高度。如果没有溢出：隐藏中的容器，即高度为零
如果的内容的高度是零100％，这是零，而且它本身不具有溢出：隐藏设置在其上，并且它是一个块的元素，那么该高度将被简单地忽略，并且高度变成什么高度须持有的元素。
有你走。现在你知道为什么你的橘子并不一路延伸到屏幕的底部。你根据高度：100％的身体，以伸展出来到屏幕的整个高度;它不以这种方式工作。
该如何解决？
-
删除整个事情，TOTALLY重写你的CSS - 这是太乱。你不希望这样。它会的从不的为你工作的权利。获取CSS一本好书，并通过它读取，然后实现它的右。 CSS是不是你可以通过试错学习。
-
开始以
的位置是：绝对的;左：0像素;右：0像素;顶：0像素;底部：0像素;的身体。这将伸展的身体，填补了整个窗口。通过设置身体背景色进行检查。 -
请注意，＃2可能无法在移动浏览器。你需要设置一个最小高度的像素值，以确保它填满整个屏幕。
I have a vertical layout that I want to remain centered on the page. One column stays fixed on the page while the other should scroll according to the content and there are some decorative floating divs that are absolute. I want the scrolling column to display 100% vertically, even if the content doesn't require the height, but I can't seem to get this to work. I've set the html tag and body tag to height:100%, as well as all of the necessary div tags. Having the html tag set to this attribute causes all of the content except for .content and .share to disappear.
Here is my html:
<html>
<body>
<div class="leaderboard"></div>
<div class="container">
<div class="share">
<p>All content © 2011
<br />
Web Design © <a href="http://www.unillu.com" target="_blank">Unillu</a>, Megan Prior-Pfeifer</p></div>
<div class="sidebar1">
<img src="assets/llama.png" width="168" height="265" alt="Deathllama logo" />
<ul class="nav">
<li><a href="howto.html"><img src="assets/phone.png" width="208" height="15" alt="How to put ringtones on your phone!" /></a></li>
<li><a href="dinosaur.html"><img src="assets/kill.png" width="208" height="31" alt="Kill a dinosaur the easy way!" /></a></li>
<li><a href="ringtones.html"><img src="assets/ringtones.png" width="208" height="15" alt="Bad ringtones for you to use!" /></a></li>
<li><a href="legal.html"><img src="assets/legal.png" width="208" height="15" alt="Use the content accordingly!"/></a></li>
<li><a href="contact.html"><img src="assets/contact.png" width="208" height="15" alt="Talk to me!"/></a></li>
<li><a href="faq.html"><img src="assets/faq.png" width="208" height="15" alt="Look here before you ask me anything!" /></a></li>
<li><a href="index.html"><img src="assets/home.png" width="208" height="15" alt="Go home!"/></a></li>
</ul>
<p> </p>
<div class="extraDiv1"></div>
<!-- end #sidebar1 --></div>
<div class="content">
<div class="extraDiv2"></div>
<p>Contact</p>
<div class="ads_column"></div>
<h3 id="text">Contact Brian, Creator:</h3>
<p id="text"><a href="mailto:brianbritvec@gmail.com">brianbritvec@gmail.com</a></p>
<h5 id="text">Contact Megan, Webmaster:</h5>
<p id="text"><a href="mailto:mprior@unillu.com">mprior@unillu.com</a></p>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
And here is my CSS:
html, body {
margin: 0;
padding: 0;
color: #FFF;
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #61ADC3;
}
html {
min-height:100%;
}
body, .container, .content, .extraDiv2, .sidebar{
height:100%;
min-height:100%;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 10;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link, a:visited, a:hover, a:active, a:focus{
color: #FFF;
text-decoration: underline;
}
.container {
width: 640px;
margin: 0 auto;
overflow: hidden;
background-color: #61ADC3;
}
.sidebar1 {
z-index: 2;
float: left;
width: 224px;
padding-bottom: 10px;
position: fixed;
background-attachment: fixed;
background-color: #61ADC3;
background-repeat: no-repeat;
background-position: right top;
text-align: right;
padding-right: 32px;
}
.extraDiv1{
z-index:3;
position:absolute;
top:0;
width:29px;
height:609px;
margin-left:227px;
background-image: url(assets/sidebar.png);
background-repeat: no-repeat;
background-position: left top;
}
.extraDiv2{
z-index:5;
position:fixed;
margin-top:-10px;
width:12px;
background-image: url(assets/stripe.jpg);
background-repeat: repeat-y;
background-position: left;
}
.content {
z-index:5;
width: 384px;
float: right;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
background-image: url(assets/gradient.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
background-color: #FBB03B;
}
/* Hack for IE */
* html .content {
height: 100%;
}
/* End IE Hack */
.leaderboard {
width:795 px;
margin: 0px auto;
background-color: #61ADC3;
}
#descriptions {
font-size: 12px;
line-height: 1;
display: block;
width: 170px;
margin:15px 55px;
}
#descriptions h5 {
font-size:14px;
font-weight:bold;
}
#text {
font-size: 12px;
line-height: 1;
width: 200px;
margin: 15px 25px;
}
#text h5{
font-size: 14px;
font-weight: bold;
}
#play {
width: 25px;
margin-right:0px;
float:left;
}
.share {
z-index:5;
font-size:9px;
bottom: 0px;
text-align: right;
width: 256px;
position:fixed;
float: left;
color: #F00;
}
.share a {
color: #C30;
}
#ads_column {
float:right;
padding: 5 px 5 px 0 px 5px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none; /* this removes the list marker
}
ul.nav li {
display: block;
margin: 5px;
}
ul.nav a, ul.nav a:visited {
margin: 5px;
display: block;
text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
border:1px;
border-color: #F30;
}
Your CSS is a huge mess.
First, avoid using position:fixed, especially on such large scale. Most mobile browsers don't "fix" those positions, and some older browsers render incorrectly with them.
height:100% means set the height to 100% of its parent container. However, which in this case is "container", which again is sized as 100% of its container, which is "body". As "body" does not have a height set on it, body's height gets calculated to be enough height to wrap the entire page.
Note: Setting height:100% on body doesn't work to make it scale to the entire window; you have to set position:absolute on body and make top/left/right/bottom zero to do that.
Back to the "body" height calculation. Notice that the sizing calculation does not include anything that is "floated", because when you "float" something, it takes it outside of the normal layout. Anything that is "floated" occupy no spacing!
Try this experiment: turn off overflow: hidden in your "container", and you'll see the height of "container" and "body" suddenly collapses into zero. All your elements are floated, so they take up no space if there is not overflow: hidden.
Thus, you whole mess of CSS is essentially telling "content" to size itself to 100% of the height of "container", which is 100% of "body", which is whatever height that is necessary to include all the content of the page. With overflow: hidden in "container", that height is the height of "content". Without overflow: hidden in "container", that height is zero.
If the height of "content" is 100% of zero, which is zero, and it does not itself have "overflow: hidden" set on it, and it is a block element, then this height will simply be ignored and the height becomes whatever height that is required to hold its elements.
There you go. Now you know why your orange doesn't extend all the way to the bottom of the screen. You were depending on height:100% on "body" to stretch it out to the full height of the screen; it doesn't work this way.
The solution?
DELETE THE WHOLE THING AND TOTALLY REWRITE YOUR CSS -- It is too much of a mess. You don't want this. And it will never work right for you. Get a good book on CSS and read through it, then do it RIGHT. CSS is not something you can learn via trial-and-error.
Start with
position:absolute; left:0px; right:0px; top:0px; bottom:0px;on "body". This will stretch "body" to fill the whole window. Check it by setting a background color on "body".Notice that #2 may not work on mobile browsers. You'll need to set a min-height in pixel value to make sure that it fills the whole screen.
这篇关于当我设置的HTML标记，以100％的高度我的内容消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
